Vue全家桶学习—Vuex核心的5个概念之Mutations和Actions

一、Mutaions和Actions

action类似于mutation，二者的关系：
1、Action 提交的是 mutation，而不是直接变更状态。
2、Action 可以包含任意异步操作。
为什么要使用action?
mutation必须同步执行，而引入action来分发mutation就可以实现异步的操作。

二、分发Action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

actions: {
  checkout ({ commit, state }, products) {
    const savedCartItems = [...state.cart.added];// 把当前购物车的物品备份起来
    commit(types.CHECKOUT_REQUEST);// 发出结账请求，然后乐观地清空购物车
    shop.buyProducts(// 购物 API 接受一个成功回调和一个失败回调
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。
action来提交mutation，然后mutation再去改变对应store中的状态。
例如上面的购物车提交案例：
首先actions中的checkout 备份购物车数据，备用。然后commit(types.CHECKOUT_REQUEST)，也就是提交结账请求对应的mutation，然后根据根据API返回的（回调）结果，再选择提交成功操作的mutation或者失败操作的mutation，达到了异步操作的目的。也就是可以这样认为，一个action包含了多个mutation，根据情况调用不同的mutation，就可以达到我们想要的结果。