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);
        }
    }
}

转载于:https://www.cnblogs.com/yhquan/p/10369140.html