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数据：

//方式1，自己直接读取
this.$store.state.personAbout.list

//方式2，借助mapState读取
...mapState('countAbout',['sum','school','subject'])

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

//方式1，自己直接读取
this.$store.getters['personAbout/firstPersonName']

//方式2，借助mapState读取
...mapGetters('countAbout',['bigSum'])

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

//方式1，自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)

//方式2，借助mapActions
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

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

//方式1，自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)

//方式2，借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})