created不能异步_Mutation不能使用异步函数，为什么？

Mutation不能使用异步函数

之前没有太深入研究，只是知道官方文档说不能异步调用Mutation，当初已为异步调用会出错，今天二次复习的时候，专门写了个例子

试试，没想到结果是OK的...那为什么官方文档说不能使用异步调用呢？

先来看我写的Demo

//对象风格提交方式

export const incrementWithObjStyle = (state, payload) => {

state.count += payload.num

}

//异步提交方式

export const INCREMENT_ASYNC_TRUE = (state, payload) => {

setTimeout(() => {

state.count += payload.num

}, 10000)

}

//组件中调用

addCountWithObjStyle() {

this.$store.commit({

type: 'incrementWithObjStyle',

num: 20

})

},

addCountWithAsyncTrue() {

this.$store.commit({

type: 'INCREMENT_ASYNC_TRUE',

num: 20

})

}

我们来看Devtools的Vuex状态图

异步调用.png

这时候Mutation触发，但是内部的异步函数还没有执行完，所以count还是0

同步调用.png

然后我又执行了5次同步操作，这时候异步10秒还没执行完，页面显示的是100，图没截到...

同步调用2.png

等待10秒异步执行完，可以看到页面变为120了，也就是说异步Mutation不会对数据造成丢失和其他影响，然后我们注意Devtools显示结果，当我们去查看多次Mutation状态时，发现同步的显示Ok，异步Mutation的Count显示为0 和我们预期结果不一致，所以会造成状态改变的不可追踪，所以官方说我们Mutation是同步的