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

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

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

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

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

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

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

コードは以下の感じ。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を参照して、その値を引数で渡そうと思ったんですが、大規模開発だと修正箇所が増えてしまい、ミスも増えるのでこのやり方がすっきりしていいと思います。