全球 vuex 观察者

Question

我有一个 Vuex 商店，在一个有点大的 Web 应用程序中提供许多 Vue 组件。我希望能够查看 Vuex 状态或获取器以进行日志记录。但是，我希望能够“全局”地观看它们，即不依赖任何特定的 Vue 组件。这排除了像

这样的技巧

//aComponent.vue
watch:{ '$store.state.data'(value, oldValue) { /*do something here*/ }}

和

//App.vue
created() {
  this.$store.watch((state) => state.watchedState) => {/*do something here*/ })
}

相反，我正在寻找一种方法来直接从定义 store 的模块中查看我的 Vuex 状态或 getter，这样每当状态发生变化时，我都可以调用一个函数，将它作为参数传递旧状态和新状态状态，以便将更改写入数据库（理想情况下会自动检测更改本身，如 Vue 的watch(new,old) {...}。

我想我应该为此使用 Vuex 原生方法 store.watch()。但到目前为止，我还不能根据需要从 store 模块调用它。

有什么线索吗？还是我错过了一些东西，而我正在尝试做的事情会像使用不同的技术一样有效地完成？

Answer 1

对于观察突变，您有这个选项。

您可以subscribe 到商店并在发生突变后收到通知。

store.subscribe( (突变，状态) => { })

您可以通过以下几种方式实现此目的：

1. 在您手动创建的商店中使用subscribe，最有可能在main.js中使用

2. 创建一个插件，将其附加到商店的每个实例并再次将 subscribe 附加到它

3. 只需使用vuex官方plugin进行日志记录

要查看 getter，您可能需要手动修补 getters 属性。

再一次，如果你想看看 vuex 在开发过程中发生了什么，你可以使用vuejs tools