Posted at

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