vuex数据修改过快 watch只有最后一条,怎样监听全部的变化?

作者站长头像
站长
· 阅读数 6

在vue2中,vuex修改数据(连续几条数据几乎同时)。在页面watch监听时,只触发最后的值。有没有遇到过这样的情况,这怎么解决

      for (let i = 0; i < 10; i++) {
        this.$store.commit("testIn", i);
      }

下面的打印出1-10

const mutations = {
  testIn(state, val) {
    state.testIn = val;
    console.log(val);
  },
}

监听时只打印10

  watch: {
     "$store.state.app.testIn"(val){
        console.log(val);
      }
}
回复
1个回答
avatar
test
2024-07-06

watch 导致的,Vue 为了提升性能会合并成一个更新。如果想要每次都受控,可以在每次 commit 修改的时候去做处理,而不是使用 watch 在页面中操作。

如果非要这样做,可以简单的使用 setTimeout 来包裹赋值操作,这样每一次的修改都可以触发 watch 了。但是还是推荐你在 commit 时处理。

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容