Vuex常用模块化使用方案

Vue中进行数据的统一状态管理，无疑Vuex是最好的选择。那么我又不想把所有的state全扔到一个文件里面进行管理，而是要进行友好的拆分，模块化管理。
Vuex的官网上当然介绍了module（模块化分割）的使用，下面简要概述项目中使用vuex的常见模块管理。

目录结构：

--store
        --moduleA
               --types.js
               --mutations.js
               --actions.js
        --moduleB
               --types.js
               --mutations.js
               --actions.js
        --store.js

由外及内来实现一下
1.vue的main.js导入store,全局可用this.$store
javascript 代码

import store from './store/store';
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

2.store.js具体实现一个store
javascript 代码

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from './moduleA/mutations';
import moduleB from './moduleB/mutations';
Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
});

3.moduleA的具体代码
1) types.js
javascript 代码

export const CHANGE_COUNTA = 'CHANGE_COUNTA';

2) actions.js
javascript 代码

import * as types from './types';

export default {
    changeCountA({commit}, num) {
        commit(types.CHANGE_COUNTA, num);
    }
}

3) mutations.js
javascript 代码

import {
    CHANGE_COUNTA
} from './types'
import actions from './actions';

const state = {
    countA: 0
}

const mutations = {
    [CHANGE_COUNTA](state, num) {
        state.countA = num;
    }
}

const getters = {
    getCountA(state) {
        return state.countA;
    }
}

export default {
    state,
    mutations,
    getters,
    actions
}

moduleB同样如此

4.view层组件使用
html 代码

<template>
    {{this.getCountA}}
    <button @click="handleDisplach">click</button>
</template>

<script>
     import {mapGetters} from 'vuex';
     export default {
        data () {
            return {

            }
        },
        computed: {
            ...mapGetters([
                'getCountA'
            ])
        },
        methods: {
            handleDisplach() {
                console.log(this.$store);
                this.$store.dispatch('changeCountA', 1);
            }
        }
    }
</script>

5.还有其他的辅助函数具体见官网