Question

当我观看$store.stateA时，以下事件的观看回调函数似乎未触发。

stateA: false

muationA(state,val){
 state.stateA = val  
}

actionA({commit},val) {
  commit('mutationA', true)
  commit('mutationB', false) //take this out would trigger the watch callback
}

那么这是怎么回事？在触发监视功能之前需要完成整个操作回调吗？

Answer 1

正如Nit所述，这两个突变是互相抵消的，因为它们是同步完成的。请阅读文档的“ Reactivity in Depth”部分以获取更多信息。特别是（强调我的）：

如果您尚未注意到，Vue会异步执行DOM更新。每当观察到数据更改时，它将打开队列并缓冲在同一事件循环中发生的所有数据更改。 如果多次触发同一个观察者，则只会将其推入队列一次。这种缓冲的重复数据删除对于避免不必要的计算和DOM操作非常重要。然后，在下一个事件循环“滴答”中，Vue刷新队列并执行实际的（已删除重复数据）工作。

其他watcher解决方案的工作原理有所不同，并且在值更改时立即触发（例如Backbone.js）。 Vue不能那样工作。

Answer 2

我曾经想使用vuex变量作为跨组件的事件发送器，并且需要将布尔变量设置为false，然后立即设置为true。但是，我看到该组件中的watch没有拾取它。在另一篇文章中提到的问题是，由于它们处于同一事件循环中，因此它们彼此抵消。

为了完成这项工作，我只需要通过等待Vue.nextTick()来分隔它们的事件循环，如下所示：

// First operation
await Vue.nextTick();
// Second operation

Vuex在同一操作中的两次提交不会触发监视

2 个答案: