Question

我正在使用opensource vuejs + vuex项目，这是源https://httpd.apache.org/docs/current/upgrading.html

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

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

Answer 1

在组件上使用此。$ 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
    }
  )

Answer 2

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

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

所以你要设置这样的观察者：

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

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

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

如果您还有其他问题，请与我们联系。

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

2 个答案: