如何同步观察 vuex 中的状态变化？答案

【问题标题】：How can I watch synchronously a state change in vuex?如何同步观察 vuex 中的状态变化？
【发布时间】：2018-02-16 04:28:59
【问题描述】：

我正在使用一个开源 vuejs + vuex 项目，这是源代码https://github.com/misterGF/CoPilot/tree/master/src/components

我目前不知道如何触发从一个组件到另一个组件的事件。

我可以使用 this.$state.store.commit("foo", "bar") 在 vuex 中存储信息，但是当两个单独的有两个不同 export default {} 时，我不知道如何让应用程序意识到例如将“foo”更改为“baz”。 .. 除非我刷新/重新加载应用程序，否则我无法知道更改

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

在你的组件上使用 this.$store.watch。 Created() 是放置它的好地方。您将要观察的状态传递给它，然后指定它更改时的回调。 Vuex 文档没有给出很好的例子。在this Vuejs Forum page 上查找更多信息。存储监视功能与 vm.$watch 相同，因此您可以阅读更多关于 here in the Vue docs 的信息。

this.$store.watch(
  (state)=>{
    return this.$store.state.VALUE_TO_WATCH // could also put a Getter here
  },
  (newValue, oldValue)=>{
    //something changed do something
    console.log(oldValue)
    console.log(newValue)
  },
//Optional Deep if you need it
    {
      deep:true
    }
  )

【讨论】：

抱歉耽搁了。我以为我已经接受了答案。无论如何，我只是来问一件事，我希望没关系。如果我同时观看多个州，如何返回两件东西？您的示例显示了一个返回 .VALUE_TO_WATCH 但我的状态有多个值。我可以返回整个状态，但其中存储了大量内容。所以，我希望找到一个解决方案来解决如何只返回一个
@hidar 你能用两个观察者吗？或者您可以创建一个基于这两个值的 getter 并观察该 getter。

【解决方案2】：

你的问题并不完全清楚，所以我在这里做一些假设。

如果您只是想让您的应用知道 store 值何时发生变化，您可以使用 watcher 来观察直接链接到 store getter 的计算属性：

所以你会在这样的事情上设置一个观察者：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
},
watch:{
    doneTodosCount(value) {
       console.log(`My store value for 'doneTodosCount' changed to ${value}`);
    }
}

如果您希望您的提交根据 foo 属性的当前值设置为不同的行为，那么您只需在您的提交函数中检查这一点。

如果您还有其他问题，请告诉我。

【讨论】：

我认为问题在于计算属性和监视属性不在同一个 .vue 文件中。我认为如果它们在同一个文件中，这可能会起作用
显然您必须查看同一文件中的计算属性。不过，您可以通过我给定的示例间接地查看 store 属性，这样您就可以轻松克服此限制并收到来自另一个组件的更改的通知。也许您有一个明确的例子来说明您要实现的目标。
手表也可能看起来像： watch:{ doneTodosCount(newValue, oldValue) { console.log('oldValue', oldValue, 'newValue', newValue ); } }