vue的vuex解析（三）之Mutations、Actions、Getters传参

Mutations传参数

vuex文件夹里的mutations.js中:

const mutations = {
	increase(state, num) { // num为参数
		state.count = state.count + num;
	}
}

组件中:

methods: {
	...mapMutations({
		Increase: 'increase',
	}),
	// increase触发事件
	increaseClick() {
		// 非mapMutations
		this.$store.commit('increase', 100);
		// 若是mapMutations，则：
		this.Increase(100);
	},
}

Actions传参数

vuex中的actions.js文件:

const actions = {
	icrease_actions(context, num) { // num为参数
		context.commit('increase', num);
	}
}

组件中:

method: {
	...mapActions({
		Increase_Actions: 'increase_actions',
	}),
	// increase_actions的触发函数
	increaseActionsClick() {
		// 非mapActions
		this.$store.dispatch('increase_actions', 100);
		// 若是mapActions，则
		this.Increase_Actions(100);
	}
}

Getters传参数

vuex文件夹的getters.js中:

const getters = {
	getToDoList: (state, getters) => (flag=true) => { // flag为参数，默认值为true
		return state.list.filter((item) => item.flag == flag); // item.flag为list里面的属性值，意为筛选item.flag和参数flag数值相等的数据
	} 
}

为助于理解，现给出state的代码如下:

const state = {
	list: [
		{
			id: 1,
			flag: true,
			name: ‘我是1’,
		},
		{
			id: 2,
			flag: false,
			name: ‘我是2’,
		},
		{
			id: 3,
			flag: true,
			name: ‘我是3’,
		}
	],
};

组件中:

methods: {
	// getters的触发函数
	gettersClick() {
		this.$store.getters.getToDoList(true);// 筛选出state的list中flag为true的数据
		// 若使用mapGetters，则：
		this.getGettersToDoList(true);// 筛选出state的list中flag为true的数据
	},
},

若使用mapGetters，则:

computed: {
	...mapGetters({
		getGettersToDoList: 'getToDoList',
	}),
},