为什么Vuex异步方法在mutations中仍然起作用？

Question

官方文档说异步修改状态不会生效：https://vuex.vuejs.org/zh-cn/...

但是如下代码确实改变了数值：

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...

我哪里理解错了吗？

Answer 1

官网是这样说的：

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

官方文档说异步修改状态不会生效 (在哪里看到的 ???)

在上面的例子中 mutation 中的异步函数中的回调让这不可能完成，什么不可能完成？
每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。
就是说用了 异步回调函数 操作 数据， 数据的状态 改变 是 不可 追踪的。
而并不是 你理解的 修改状态不会生效

且 官网中 有如下 解释

在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务：

PS
上文的 devtools 是 vue 的浏览器调试 插件
对vue调试很有用