Vuex的actions属性具体使用时，如何实现复杂业务逻辑的异步处理？

本文共计1064个文字，预计阅读时间需要5分钟。

Vuex 的 action 属性内，可以定义异步操作逻辑，以满足某些业务场景的需求。在组件内，通过 `$store.dispatch` 调用 action 定义的函数。例如，使用 action 来实现计数器的异步增加：计数器异步加 1。

Vuex 的 action 属性内，可以定义异步操作逻辑，以满足某些业务场景要求。在组件内，是通过 $store.dispatch 来触发 action 定义的函数。

我们使用 action，来为计数器异步增 1。

1 Promise 方式

main.js：

const store = new Vuex.Store({ state: { count: 0, }, mutations: { increment(state, n = 1) { state.count += n; } }, actions: { asyncInrement(context) { return new Promise(resolve => { setTimeout(() => { context.commit('increment'); resolve(); }, 1000) }); } } });

这里使用了 Promise ，在 1 s 后提交了 mutations 中定义的 increment 递增函数。