Vuexでモジュールと処理を細分化する

Nuxt.jsを最近やり始めたんだけれど、Vuexでの状態管理がサクサクと書けて非常に良いな、という印象を持っている
んで、Vuexで利用する store フォルダ内のファイルをどのように分割するか、というと、これはどうやら人それぞれらしい

• index.js 内に全てまかなう方法
• index.js、posts.js、user.js とみたいにモジュール毎にファイル分け
• index.js、mutations.js、actions.js、getters.jsのように状態管理の要素別にファイル分け

このような方法があるけれど、以下のようにモジュール別にフォルダを分けて、状態管理の要素別にファイル分けするという方法でやってみた

└── store
    ├── index.js
    └── posts
    │   ├── actions.js
    │   ├── getters.js
    │   ├── index.js
    │   └── mutations.js
    └── users
        ├── actions.js
        ├── getters.js
        ├── index.js
        └── mutations.js

このようにした理由はいくつかあるのだけれど、以下の2つが大きな理由

• 複数人で開発するときの開発しやすさ
• VuexでTypeScriptの導入がやりやすくなった時に、少しずつJavaScriptからTypeScriptへ移行できるようにする

store/index.jsで各モジュールをimportする

store/index.js

import Vuex from 'vuex'
import postsModule from './posts'
import usersModule from './users'

new Vuex.Store({
  modules: {
    posts: postsModule,
    users: usersModule,
  }
})

各モジュールのindex.jsに処理をimportする

actions、getters,mutationsをindex.jsでimportしておく
また、今回は各stateについてはモジュール内のindex.jsで定義した
namespaced: true にしておくことによって、他モジュールやcomponentからは モジュール名/postDatas や モジュール名/アクション名 といったかんじで呼び出すことができる

store/posts/index.js

import actions from './actions'
import getters from './getters'
import mutations from './mutations'

export const state = () => ({
  postDatas: {},

  postComments: [],
})

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}

各々の処理を定義

以下のようにやっていく(例ではaction)

store/posts/actions.js

export default {
  async fetchPostBy({ commit }, { id }) {
    ....
  },
...

}

このケースだと、 posts/fetchPostBy でこのアクションを呼び出すことができる。
ただし、同じpostsモジュール内の場合だと fetchPostBy で呼び出すことが可能