はじめに

Nuxt.js storeをモジュールで使用するときに別のモジュールのmutationsやらstateを利用したくなって調べたのでメモを残します。

AモジュールでBモジュールの値を参照する(state)

別のモジュールのstateを参照するパターン

rootStateを使用

// AモジュールからBモジュールを参照
export const actions = {
  add ({ rootState　}, hoge) {
    const bMosule = rootState.b.bState
    this.$axios.$patch(url+ 'post/' + selectedBook.id, {
      post: {
        // 送る値
      }
    })
      .then((response) => {　// レスポンス

addにrootStateでrootを読み込ませてroot経由でBモジュールの値を参照します。
直接Bモジュールを読み込むことはできないが、rootを経由すると参照可能になる。

× A → B.state

○ A → root → B.state

Aモジュールから別モジュールのMutationsを使用

別モジュールのMutationsを使用

commitの第３引数に {root: true}　を使用

① rootのMutationsを使用

// index.jsのalertを使える
commit('alert', true, { root: true })

第２引数にはいつも通り渡したい値をセットします。
今回の場合はrootのMutationsであるalertを使用しています。

② BモジュールのMutationsを使用

// BモジュールのbAlertMutationsを使える
commit('B/bAlert', true, { root: true })

root経由でBモジュールのMutationsを使用できます。

Nuxt.jsのstoreで他のモジュールのstateやmutationsを使用する方法

はじめに

目次

AモジュールでBモジュールの値を参照する(state)

Aモジュールから別モジュールのMutationsを使用

参考文献