Mutation不能使用異步函數(shù)

之前沒(méi)有太深入研究，只是知道官方文檔說(shuō)不能異步調(diào)用Mutation，當(dāng)初已為異步調(diào)用會(huì)出錯(cuò)，今天二次復(fù)習(xí)的時(shí)候，專門(mén)寫(xiě)了個(gè)例子
試試，沒(méi)想到結(jié)果是OK的...那為什么官方文檔說(shuō)不能使用異步調(diào)用呢？

先來(lái)看我寫(xiě)的Demo

//對(duì)象風(fēng)格提交方式
export const incrementWithObjStyle = (state, payload) => {
  state.count += payload.num
}
//異步提交方式
export const INCREMENT_ASYNC_TRUE = (state, payload) => {
  setTimeout(() => {
    state.count += payload.num
  }, 10000)
}
//組件中調(diào)用
addCountWithObjStyle() {
      this.$store.commit({
        type: 'incrementWithObjStyle',
        num: 20
      })
},
addCountWithAsyncTrue() {
    this.$store.commit({
    type: 'INCREMENT_ASYNC_TRUE',
    num: 20
    })
}

我們來(lái)看Devtools的Vuex狀態(tài)圖

異步調(diào)用.png

這時(shí)候Mutation觸發(fā)，但是內(nèi)部的異步函數(shù)還沒(méi)有執(zhí)行完，所以count還是0

同步調(diào)用.png

然后我又執(zhí)行了5次同步操作，這時(shí)候異步10秒還沒(méi)執(zhí)行完，頁(yè)面顯示的是100，圖沒(méi)截到...

同步調(diào)用2.png

等待10秒異步執(zhí)行完，可以看到頁(yè)面變?yōu)?20了，也就是說(shuō)異步Mutation不會(huì)對(duì)數(shù)據(jù)造成丟失和其他影響，然后我們注意Devtools顯示結(jié)果，當(dāng)我們?nèi)ゲ榭炊啻蜯utation狀態(tài)時(shí)，發(fā)現(xiàn)同步的顯示Ok，異步Mutation的Count顯示為0 和我們預(yù)期結(jié)果不一致，所以會(huì)造成狀態(tài)改變的不可追蹤，所以官方說(shuō)我們Mutation是同步的