vuex-store模塊化配置

一、目錄結構： src -> js -> modules

1. 在modules下新建文件夾，文件夾名稱按模塊功能命名

如：

modules ———— home  -> homeModule.js
        |
        ———— modal  -> modalModule.js 

2. 在modules 下新建stores.js,注冊所有狀態

import homeState from './homeModule.js'
import modalState from './modalModule.js'

export const modules = {
    modules: {
        homeState,
        modalState
    }
}

3. 在入口文件，如main.js中引用 stores.js

import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/js/router'
import { modules } from '@/js/modules/stores.js'
import HelloWorld from './HelloWorld'

Vue.config.productionTip = false
Vue.use(Vuex)

// 狀態管理
const store = new Vuex.Store(modules);

new Vue({
    el: '#app',
    router,
    store,
    components: { HelloWorld },
    template: '<HelloWorld/>'
})

二、homeModule.js結構

export default module = {
    state: {
        count: 1
    },
    mutations: {
        increment(state, componentData) {
            // 變更狀態
            state.count =  state.count + componentData
        }
    },
    actions: {
        // actions一般是處理異步邏輯
        incrementData(context, componentData) {
            context.commit('increment', componentData);
        }
    }
}