H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

官方文档说异步修改状态不会生效: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…

我哪里理解错了吗?

回答:

官网是这样说的:

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

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

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

且 官网中 有如下 解释

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

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

本文地址:H5W3 » 为什么Vuex异步方法在mutations中仍然起作用?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址