Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
15
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@hisashi_matsui

Nuxt.js: storeモジュールから別のstoreモジュールのstateを参照する方法

前回の投稿からだいぶ間が空いてしまいました。

11月にG’s Academy LABコースを卒業して、フロントエンドエンジニアとしてキャリアをスタートしました。
Nuxt.jsで開発してるのですが、ググってもなかなか出てこなかったstoreのモジュールの扱い方で新たに学びがあったので記事にしました。

G’s時代にNuxtで5つアプリ作ったんですが、どれもstoreモジュールは一つだけでした。
ですが、現場の大規模開発となるとモジュールが何個もあるのが当たり前な状態です。

そこで今回ハマったのが、storeモジュールAからstoreモジュールBのstateの状態を参照しようとして調べたけども、会社の人に教えてもらうまで、中々正解に辿りつけなかったので今回記事にしよう思いました。

以下の図のように、vueファイルでクリックなどのイベント発火時にcommitしてmutationsの関数を呼んで、その処理の中で別モジュールのstateを参照する必要がどうしてもあったのです。
rootStateを使う事はわかったんですが、延々とmutationsから参照しようと悪戦苦闘していたら、このrootStateはmutations内では使えず、gettersとactionsの中でしか使えないとのこと。。

名称未設定-2_アートボード 1.jpg

なので、今回のケースでいうと、actionsを経由する必要があったのです。
まず、vueファイル側でcommitからdispatchに変えてactionsの関数を呼びます。その中で別のstoreモジュールのstateを参照し、mutationsに引数で渡すという流れで作る必要があったそうです。。

名称未設定-2_アートボード 1 のコピー.jpg

コードは以下の感じ。dispatchとmutationsは省略します。

export const actions = {
  add({ rootState, commit }, id) {
    const jobData = {
      cast: rootState.B.data,
      id,
    };
    commit('add', jobData);
  },
};

rootState.モジュール名.変数名でアクセスできます。
= rootState.B.data

これでうまくいきました。このrootStateの使い方がわからず、vueファイル側でcommitする時にstoreモジュールBを参照して、その値を引数で渡そうと思ったんですが、大規模開発だと修正箇所が増えてしまい、ミスも増えるのでこのやり方がすっきりしていいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
15
Help us understand the problem. What are the problem?