Vue (18) — 模块化+命名空间

本文链接：https://blog.csdn.net/m0_59897687/article/details/122278257

模块化+命名空间

一、目的

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

二、修改store.js

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

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

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

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

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

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

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

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

//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum])

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

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

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

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

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

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