说说 Vuex 的 actions 属性

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 递增函数。它是 ES6 语法，有三种状态：

状态	说明
Pending	进行中
Resolved	已完成
Rejected	失败

index.vue：

2 Callback 方式

也可以使用普通回调来实现异步方案。

main.js

const store = new Vuex.Store({
...
    actions: {
      ...
        asyncInrement2(context, callback) {
            setTimeout(() => {
                context.commit('increment');
                callback();
            }, 1000);
        }
    }
});

index.vue：

3 效果