vue.js - 如何同步观察 vuex 中的状态变化？

Question

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

我目前在了解如何从一个组件触发事件到另一个组件时遇到问题。

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

Answer 1

在您的组件上使用 this.$store.watch。 Created() 是放置它的好地方。您将要观察的状态传递给它，然后指定状态发生变化时的回调。 Vuex 文档没有提供很好的示例。查找有关 this Vuejs Forum page 的更多信息. Store watch 功能与 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
    }
  )