我如何同步观看Vuex中的状态变化

Question

我正在使用opensource vuejs vuex项目，这是源https://github.com/mistergf/copilot/copilot/tree/master/master/src/components

我目前在知道如何从一个组件到另一个组件触发事件的问题遇到问题。

我可以使用this.$state.store.commit("foo", "bar")将信息存储在Vuex中，但是当两个分离有两个差异export default {}时，我不知道我如何在" foo"进行检查时如何使应用程序知道为" baz" ...除非我刷新/重新加载应用程序，我无法知道更改

Answer 1

使用此。创建（）是一个很好的地方。您将其传递给状态以观看，然后指定何时更改的回调。Vuex文档没有提供好的例子。在此VUEJS论坛页面上查找更多信息。商店手表的功能与VM。$ Watch相同，因此您可以在Vue文档中阅读有关此信息的更多信息。

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
    }
  )

Answer 2

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

如果您只想知道您的应用程序何时更改了商店值，则可以使用观察者观看直接链接到商店Getter的计算属性：

因此，您会在这样的东西上设置一个观察者：

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

如果您希望您的承诺行为会有所不同，具体取决于您的foo属性的当前值，则可以在您的提交功能中检查此内容。

让我知道您是否还有一些问题。