Vuex 白话教程第四讲：Vuex 旗下的 Action

转载出处：简书作者 大宏说
作者链接：大宏说

写在前面

通过上一讲「Vuex 旗下的 Mutation」，我们知道了如何去修改 State 的数据，而且只能通过 Mutation 去提交修改，另外还了解到了 Mutation 必须是同步函数，那么如果需求当中必须要用到异步函数怎么办？

好办，那就轮到 Action 上场了。

简单介绍

Action 类似于 mutation，不同在于：

1、Action 提交的是 mutation，而不是直接变更状态。
2、Action 可以包含任意异步操作。

看一个简单的 action 示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

可以看到，Action 函数接受一个 context 参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性，但是他们并不是同一个实例，后面学习 Modules 的时候会介绍它们为什么不一样。

所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

当然，为了代码简化，我们可以使用 ES2015 的 参数解构 来直接展开，便于 commit、state 等多次调用。如下：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

分发 Action

store.dispatch('increment')

Mutation 通过 store.commit 触发，那么 Action 则通过 store.dispatch 方法触发。

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

和 Mutation 分发的方式异曲同工，这是注意这里是 dispatch：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：

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

注意示例中正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。

组合 Action

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

不知道什么是 Promise 的，可以 戳此了解下。

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

调用:

store.dispatch('actionA').then(() => {
  // ...
})

当然，也可以这样：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

我们还可以利用 async / await 的方式组合 action ：

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

我们在实际项目中经常的会遇到这种情况，比如说你现在想要处理 B 事件，但是 B 事件需要一种资源才能进行，而这种资源必须通过 A 事件来获得。这个时候，我们就需要组合 Action 来处理这些事件了。

写在最后

这一讲官方讲解得非常清晰，基本上没啥难理解的，所以大部分都是直接引用了。当然，有任何的疑问都可以在下方留言和我一起沟通讨论，谢谢！

下一讲「Vuex 白话教程第五讲：Vuex 的小帮手」