[Vue.js/Nuxt] Storeを複数作成した場合のデータアクセス方法

分かりにくい標題で申し訳ありません。
Storeを利用する場合は、
Storeディレクトリにindex.jsファイルを作成して、state, getters, mutations, actionsを記述していくかと思います。

しかし、index.js以外の情報をStoreで保持したい場合はどうでしょうか。Storeで複数ファイルを利用する方法と、データアクセス方法について解説していきます。

Storeディレクトリの配下を下記とします。　
※me.jsは認証ユーザーの情報を保持するStoreとします。

/* 省略 */
Store
  L index.js
  L me.js

①：stateへのアクセス

まずは、stateへのアクセスについて見ていきたいと思います。

index.jsのstate

export const state = () => ({
    txt: 'texttext',
  })
// state以外省略

me.jsのstate

export const state = () => ({
  id: 0,
  name: 'taro',
  email: 'taro@gmail.com',
  })
// state以外省略

consoleで確認していきます。

任意のComponent内で、下記consoleを実施して下さい。

console.log(store.state);

結果は下記が出力されます。

me: (...)
txt: "texttext"

これは何が出力されたのでしょうか。
ドリルダウンしてme: (…)の中身をクリックしてみると。下記が表示されます。

me: Object
id: 1
name: "taro"
email: 'taro@gmail.com',

つまり、console.log(store.state);はStoreに保持している全てのstateを出力しました。しかし、index.jsファイルと、me.jsファイルではアクセス方法が少し異なります。

①-1；me.jsのstateをダイレクトにアクセス

次に、me.jsのstateをダイレクトにアクセスしてみます。下記のconsoleを呼び出して下さい。

console.log(store.state.me);

結果は下記です。　単純ですね。

id: 1
name: "taro"
email: 'taro@gmail.com',

②：actions, mutationsへのアクセス

それでは、他のメソッドについても見ていきます。

me.jsにてactions, mutationsを定義していきます。

  export const mutations = {
    setMe(state, payload) {
      state.id = payload.id
      state.name = payload.name
    },
  }
  
  export const actions = {
    async setMeActions({ commit, state }, payload ) {
        // console.log(state);
        commit('setMe', payload)
    },
  }

任意のComponent内から、me.js内のactions, mutationsへアクセスする方法は下記です。

store.dispatch('me/setMe' ,payload )

store.commit('me/setMeActions' ,payload )