【Vuex】機能ごとに切り出しモジュールにする

Vue.js

モジュール化

ユーザーと掲示板をストアする機能をそれぞれ別のモジュールとして切り出すみたいなこと。モジュールにするときは記述の仕方が異なる。
Vuexのモジュールが複数ある時、gettersやmutationsなどをそれぞれのモジュールの名前空間に入れなければ使えない。

    // store/modules/count.js
    const state = {　
        count: 2
    };
    const getters = {
        doubleCount: state => state.count * 2
    };
    const mutations = {　
        increment(state, number) {
            state.count += number
        }
    };
    const actions = {　
        sync(context, number) {
            context.commit('increment', number);
        },
        async(context) {
            setTimeout(() => {...}, 1000);
        }
    };
    
    export default {
        state,
        getters,
        mutations,
        actions
        namespaced: true  // 複数のモジュールがあるときnamespaced: trueが必要
    };

大元のファイルでそれぞれのモジュールを読みこむ

// store/index.js

import count from './modules/count.js';
 
export default new Vuex ({
    modules: {
        count: count,
        foobar: foobar
    }
});

コンポーネントでの記述

名前空間に入ることによって、count/request　のような名前になる

methods: {
  request() {
    this.$store.dispatch('count/request', number);
  }
}
// mapActionsなどの場合

methods: {
  ...mapActions('count', ['request'])
}

コンポーネントから名前空間にコミットする場合、第三引数に{ root: true }が必要
namespace:true とすると起点がモジュールローカルになっているので、root起点にする

methods: {
  commit('count/increment', number, { root: true })

名前空間で分けたときのgetters, mutations, actionsの呼び出し

mapGetters
this.authUser
this.$store.getters['users/authUser']　// 大括弧

mapMutationsありとなし
this.login
this.$store.commit('users/login', user)　// 小括弧

mapActionsありとなし
this.login
this.$store.dispatch('users/login', user)　// 小括弧