Vuex的模块化+命名空间

1.目的：让代码更好的维护，让多种数据分类更加明确。

2.修改store.js

const countAbout = {
    namespaced:true,//开启命名空间
    state:{x:1},
    mutations:{...},
    actions:{...},
    getters:{
        bigSum(state){
            return state.sum * 10
        }
    }
}
 const personAbout = {
    namespaced:true,//开启命名空间
    state:{...},
    mutations:{...},
    actions:{...},
}

const  store = new Vuex.Store({
    modules:{
    countAbout,
    personAbout
    }
})_

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

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二，借助mapState读取
...mapState('countAbout',{'sum','school','subject'})

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

//方式一，自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二，借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

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

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions
...mapActions('countAbout',{incrementOdd:'jisOdd',incrementWait:'jiaWait'})

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

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})