[初心者向け]VuexのStoreを細かくモジュール分けしよう

はじめまして、PMをやっているtatsukenと申します。はじめまして
研修の一環でvue.js、expressを書くことがあったので、そのことを中心にまとめていきたいと思います。

はじめに

Vuexを始めたばかりの自分はVuexに関連する処理をすべてstore.jsなどの一つのファイルに記述してしまっており、ファイルが非常にファットになってしまっおり、可読性も非常に下がってしまっていました。
そこでVuexファイルを細かくモジュール分していきたいとおもいます。

必要な環境

• Vue
• Vuex

実装

まずstore/以下に任意のjsファイルを作成してください。今回はuser.jsというファイルを作成しています。

user.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
    //stateデータ
    user: null
}
const mutations = {
    //同じ処理を行うならnewMsgはobjectに
    setUserInfo(state, userInfo) {
        //任意の同期処理
        state.user = userInfo
    }
}
const actions = {
    getUser() {
        //任意の非同期処理
    }
}
export default {
    namespaced: true,
    state,
    actions,
    mutations,
}

このようにstate,mutations,actionsそれぞれを定数に入れてそれをexportしています。

それぞれのモジュールを集約しよう

storeディレクトリと同じ階層に任意のjsファイルを作成してください。今回はstore/index.jsを作成します。

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        user: user
    },
})

ここではまずstore/以下の作成したVuexファイルをimport user from './store/user'でインポートします。
そしてモジュールを集約してexportしています。

main.jsで呼び出し

main.js

import Vue from 'vue'
import store from './store/index'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

mian.js内でstore/indexをインポートし、Vueインスタンス内にインポートしたものを読み込んでください。

Vuexを呼び出す際の注意点

sample.vue

<script>
export default {
  created() {
    this.$store.dispatch("user/getUser");
    this.$store.commit("user/setUserInfo", "hoge");
    this.$store.state.user.user;
  }
};
</script>

このように呼び出し先の指定がindex.jsでの定義から、"user/getUser"、"user/setUserInfo"、state.user.userのようになっていることに注意です。

最後に

このようにVuexのファイルを細かくモジュール分けすることができました。
ファイルを細かくモジュール分けすると可読性が上がり、開発効率が上がると思います。
機会があればぜひ試してみてください。
なにか間違いなどあれば指摘していただけると幸いです。