vuex之mutation&createNamespacedHelpers&getterr

mutation

• 更改vuex的store状态的方法
• 事件类型为字符串和回调函数

export default new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		changeCount(state, payload) {//事件注册，接受state为第一个参数。payload为传入的额外参数，大多数情况下应为对象
			state.count += payload.amount
		}
	}
})
//事件调用
this.$store.commit('changeCount', {
	amount: 10
})

createNamespacedHelpers

• 创建基于某个命名空间辅助函数
• 返回一个对象，对象中有新的绑定在（给定命名空间值上）的组件绑定辅助函数

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('main')
export default {
	computed: {
	//在`main`中查找
		...mapState({
			a: state => state.a
		})
	},
	methods: {
	//在`main`中查找
		...mapActions([
			'fn'
		])
	}
}

getter

store的计算属性，与computed类似具有缓存功能依赖值发生改变才重新计算

export default new Vuex.Store({
	state: {
		mainActive: 0,
		mainMenu: []//[{children: [{}}]
	},
	getters: {
		subMenu: state => {
			return (!!state.mainMenu[state.mainActive]&&!!state.mainMenu[state.mainActive].children)?state.mainMenu[state.mainActive].children:[];
		}
	}
})