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是同步的