vuex模块化+命名空间（namespaced）

目的

让代码更好维护，让多种数据分类更加明确

修改store.js

//求和相关配置
const countOptions = {
    namespaced:true,   //开启命名空间
    actions:{
        addOdd(context,value){
            if(context.state.sum % 2){
                context.commit('ADD',value)
            }
        },
        addWait(context,value){
            setTimeout(() => {
                context.commit('ADD',value)
            }, 1000);
        }
    },
    mutations:{
        ADD(state,value){
            state.sum += value
        },
        SUBT(state,value){
            state.sum -= value
        }
    },
    state:{
        sum:0
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

//人员相关配置
const personOptions = {
    namespaced:true,   //开启命名空间
    actions:{},
    mutations:{
        ADD_PERSON(state,person){
            state.personList.unshift(person)
        }
    },
    state:{
        list:[
            {id:'001',name:'范宁'}
        ]
    },
    getters:{}
}

//创建并暴露（导出）store
export default new Vuex.Store({
    modules:{
        countOptions,
        personOptions
    }
})

开启命名空间后，组件中读取state数据

//方式一：自己直接读取
this.$store.state.personOptions.list
//方式二：借助mapState获取
...mapState('countOptions',['sum'])

开启命名空间后，组件中读取getters数据

//方式一：自己直接读取
this.$store.getters['personOptions/firstPerson']
//方式二：借助mapGetters获取
...mapGetters('countOptions',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personOptions/addPerson',person)
//方式二：借助mapActions
...mapActions('countOptions',["addOdd","addWait"])

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personOptions/ADD_PERSON',person)
//方式二：借助mapMutations
...mapMutations('countOptions',["ADD","SUBT"]),

进一步模块化

可以将每组相关配置都放在单独的js文件中，注意一定要导出，然后再在index.js文件中引入