Nuxt.jsによるVuexのストア分割の仕組み

ストアによるデータ管理のメリットは？

以下の二つだと考えています。

• コンポーネント間の値の受け渡しが必要ない
• コンポーネントのビジネスロジックをストアに切り出せる

Vuexでは値をstateで保持し、getterでコンポーネント側から取得。mutationsで値を変更し、API通信や外部ストレージへのアクセスなどmutationsの責務外の処理をactionsで行う、といったことをしています。

つまりストアを利用することで、これらコンポーネント側のビジネスロジックがストアに集約でき、管理が容易になります。

また、データをグローバルに持つことができるので親コンポーネントから子コンポーネントにpropsで値を渡したりといった処理が必要ありません。

なぜストア内の処理を分割管理したいのか？

アプリケーションが大きくなり成長していくにつれて、ストアに色々な処理やデータが集まるようになり管理が煩雑になることが考えられます。
これを解決するには、ストアーを分割して管理する必要があるからです。

ただ、書籍「Vue.js入門 基礎から実践アプリケーション開発まで」には以下のような記述があります。

Vuexは信頼できる唯一の情報源であることを前提に実装されています。アプリケーション内でただ1つのストアのみが存在するようにします。

ストアを分割することは上記に反するような気がしますが、Vuexにはそれを考慮した上で分割するためのモジュール機能が用意されています。

モジュールに分けるには

以下のように、modulesというオプションを使うことで分割が可能です。

namespaced: trueに設定しているので、コンポーネント側からはthis.$store.getters('users/getUser')といった形式で定義したモジュール名を含めて呼び出します。このオプションにより名前空間が作られるので、同名のメソッドが定義されていてもどちらも呼ばれてしまうようなことが起きない仕組みになっています。

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        users: {
            namespaced: true,
            state: {
                user: "taro"
            },
            getters: {
                getUser(state) {
                    return state.user
                }
            },
            mutations: {...},
            actions: {...}
        },
    },
    teams: {
        namespaced: true,
        state: {...},
        getters: {...},
        mutations: {...},
        actions: {...}
    },
});

→上記をインスタンス化する際に引数としてまとめてモジュールを渡しているのでみずらいですが、ファイル分割するなどで管理しやすくすることもできます。