Vue2_15

Vue2_15

1、Vuex模块化

把给不同组件的 叽里呱啦 分别放到不同的对象里

比如这样：

const countAbout = {
	actions:{},
	mutations:{},
	state:{},
	getters:{},
}
const personAbout = {
	actions:{},
	mutations:{},
	state:{},
	getters:{},
}

那么，把Vuex模块化拢共分几步，答：3步

1. 对象的创建
2. 放进 Store 中
3. 使用的方式（两种：普通调用 和 map们的调用）

1.对象的创建

把那些 actions、mutations… 分门别类的放进对象里就行了

const countAbout = {
	// 调用 Getters 时要用
	namespaced: 'countAbout',
	actions:{
		oddAdd(context, value){...},
		waitAdd(context, value){...},
	},
	mutations:{
		ADD(state, value){...},
		REDUCE(state, value){...},
	},
	state:{
		sum: 0,
	},
	getters:{
		bigSum(state){...},
	},
}

const personAbout = {
	namespaced: 'personAbout',
	actions:{
		OxO(){...},
		addNameServer(context){...}
	},
	mutations:{
		ADD_NAME(state, person){...},
	},
	state:{
		PersonList: [
			{id:'001', name:'小明'},
			{id:'002', name:'小红'},
			{id:'003', name:'小刚'},
		]
	},
	getters:{
		countPersons(state){...}
	},
}

对象中有一个 namespaced，是调用 Getters 时用到的名字，没有就会报错

2.modules属性

使用创建 Store 配置对象中的 modules 属性

export default new Vuex.Store({
	modules:{
		countAbout,
		personAbout,
	}
})

3.map使用

普通：

...mapMutations({addSelect: 'ADD', reduceSelect: 'REDUCE'}),
...mapActions(['oddAdd', 'waitAdd'])

模块化：

...mapMutations('countAbout', {addSelect: 'ADD', reduceSelect: 'REDUCE'}),
...mapActions('countAbout', ['oddAdd', 'waitAdd'])        

• 参数1：namespaced
• 参数2：数组 或 对象

4.普通调用

语法不完全一致，有两种

1. state
2. 其他

4.1 state

this.$store.state.personAbout.PersonList

$store -> state -> namespaced -> 数据

4.2 其他

和 state 像又不像，比如 getters

// 前面完全一致
this.$store.getters

但是不是 namespaced .xxxxx，而是 namespaced / xxxxxx

但是 ‘.’ 后面不能加 ‘/’

this.$store.getters['personAbout/countPersons']
this.$store.commit('personAbout/ADD_NAME', name)
this.$store.dispatch('personAbout/addNameServer')