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

Question

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

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

我可以用来this.$state.store.commit("foo", "bar")在vuex中存储信息,但是当两个单独有两个区别时,export default {}我不知道如何在"foo"被改为"baz"的时候让我知道应用程序...除非我刷新/重新加载应用程序,我无法知道这些变化

Answer 1

在组件上使用此.$ store.watch.Created()是一个放置它的好地方.您将状态传递给要监视,然后指定它何时更改的回调.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

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

如果您只是希望您的应用知道商店值何时发生变化,您可以使用观察者来观看直接链接到商店获取者的计算属性:

所以你要设置一个像这样的观察者:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

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

如果您希望提交的行为有所不同,具体取决于您的foo属性的当前值设置为什么,那么您只需在提交函数中检查这一点.

如果您还有其他问题,请与我们联系.