Vuex核心思想之Mutation、action

一、Mutation——更改store的状态的唯一方法

更改Vuex的store中的状态的唯一方式是提交mutation。Vuex中的mutation类似于事件

每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。

回调函数就是我们对状态进行操作的地方，并且他接收state作为第一个参数。

const store = new Vuex.store({
   
   
	state: {
   
   
		count: 1
	},
	mutations: {
   
   
		increment (state) {
   
   
			//变更状态
			state.count++
		}
	}
})

注意： 你不能直接调用mutations，increment更像是一个事件注册。
要唤醒一个 mutation handler，你需要以相应的type 调用 store.commit方法：

store.commit('increment') //之后打印store.state.count === 2

提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

// ...
mutations: {
   
   
  increment (state, n) {
   
   
    state.count += n
  }
}
store.commit('increment', 10) //此时 count == 11

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

// ...
mutations: {
   
   
  increment (state, payload) {
   
   
    state.count += payload.amount
  }
}

store.commit('increment', {
   
   
  amount: 10
})

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
   
   
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
   
   
  increment (state, payload)