Vuex的五大属性_学习总结

Vuex的五大属性_学习总结

state、getter、mutation、actions、modules

1.state

vuex的基本数据，用来存储变量，在vue中使用 this.$store.state.userName

state: {
	userName: '',
	age:20
}

2.geeter

geeter从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法，在vue中使用 this.$store.getters.ageDouble。

getter: {
ageDouble: function (state) {
		return state.age* 2
	}
}

3.mutation

mutation提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
commit：同步操作，写法： this.$store.commit(‘mutations方法名’,值)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

mutations: {
	SET_USER: (state, userName) => {
		state.userName= userName
	},
}
this.$store.commit('SET_USER','张三')

4.action

action和mutation的功能大致相同，不同之处：1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)。

actions: {
	login({commit}, value) {
		commit('SET_USER', value)
	},
}

5.modules

modules模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。