Vue学习笔记-模块化+命名空间

theLuckyLong2023-11-30 17:15

目的

让代码更好维护，让多种数据分类更加明确（不同的模块挤在一个index.js中显得臃肿且不方便管理）

实现方式

修改store/index.js(也可以将不同模块分别写在不同的js文件中)

javascript 复制代码

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

const personAbout = {
	namespace = true,//开启命名空间
	state = {
		list:[xxx]
	},
	mutations = {...},
	actions = {...}
}

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

开启命名空间后，组件读取各个模块的state数据

javascript 复制代码

//方式一：直接读取
this.$store.state.countAbout.sum
//方式二：借助mapState读取
...mapState('countAbout',['sum',...])

组件读取各个模块的getters数据

javascript 复制代码

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

组件调用dispatch

javascript 复制代码

//方式一：直接调用
this.$store.dispatch('personAbout/addPerson',value)
//方式二：借助mapActions
...mapActions('personAbout',{addPerson:'addPerson'})

组件调用commit

javascript 复制代码

//方法一：直接调用
this.$store.commit('personAbout/ADD_PERSON',value)
//方式二：借助mapMutations
...mapMutations('personAbout',{ADD_PERSON:'ADD_PERSON'})

注意：mapActions和mapMutation中无法填写函数参数，需要在html组件的@click方法声明中自己填写