Vuex 模块化

目录

1.模块化+命名空间

        1.目的：

        2.修改 store.js

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

        4.开启命名空间后，组件中gettters中的数据

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

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

---

1.模块化+命名空间

        开启命名空间：namespaced: true

        1.目的：

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

        2.修改 store.js

        

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

const personAbount = {
    namespaced: true, // 开启命名空间
    state: {...},
    actions: {...},
    mutations: {...},
    getters :{...}
}

const store = new Vuex.Store({
    modules :{
        countAbount,
        personAbount
    }
})

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

// 方式一：自己直接读取
this.$store.state.personAbount.list
// 方式二：借助mapState读取
...mapState('countAbount', ['sum', 'student', 'school', 'age'])

        4.开启命名空间后，组件中gettters中的数据

// 方式一：自己直接读取
this.$store.getters['personAbount/firstPersonName']
// 方式二：借助 mapGetters 读取
...mapGetters('countAbount',['firstPersonName'])

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

// 方式一：自己直 dispatch
this.$store.diapatch('personAbount/addPerson', peson)
// 方式二：借助 mapActions
...mapActios('countAbount', {incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'})

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

// 方式一：自己直接调用 commit
this.$store.commit('personAbount/ADD_PERSON', personObj)
// 方式二： 借助 mapMutations
...mapMutations('personAbount', {addPerson: 'ADD_PERSON'})