鍍金池/ 問答/HTML/ 為什么Vuex異步方法在mutations中仍然起作用？

為什么Vuex異步方法在mutations中仍然起作用？

官方文檔說異步修改狀態(tài)不會(huì)生效：https://vuex.vuejs.org/zh-cn/...

但是如下代碼確實(shí)改變了數(shù)值：

mutations: {
      increment: (state)=>{
        window.fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(json => {
          state.count++
        })
    },
    decrement: state => state.count--
  }

示例地址
https://jsfiddle.net/justforu...

我哪里理解錯(cuò)了嗎？

回答
編輯回答
心悲涼

官網(wǎng)是這樣說的：

現(xiàn)在想象，我們正在 debug 一個(gè) app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成：因?yàn)楫?dāng) mutation 觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒有被調(diào)用，devtools 不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用——實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。

官方文檔說異步修改狀態(tài)不會(huì)生效 (在哪里看到的 ???)

在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成，什么不可能完成？
每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。
就是說用了 異步回調(diào)函數(shù) 操作 數(shù)據(jù)， 數(shù)據(jù)的狀態(tài) 改變 是 不可 追蹤的。
而并不是 你理解的 修改狀態(tài)不會(huì)生效

且 官網(wǎng)中 有如下 解釋

在 mutation 中混合異步調(diào)用會(huì)導(dǎo)致你的程序很難調(diào)試。例如，當(dāng)你調(diào)用了兩個(gè)包含異步回調(diào)的 mutation 來改變狀態(tài)，你怎么知道什么時(shí)候回調(diào)和哪個(gè)先回調(diào)呢？這就是為什么我們要區(qū)分這兩個(gè)概念。在 Vuex 中，mutation 都是同步事務(wù)：

PS
上文的 devtools 是 vue 的瀏覽器調(diào)試 插件
對vue調(diào)試很有用

2018年6月7日 14:37