看一个 vuex 商店答案

【问题标题】：Watching a vuex store看一个 vuex 商店
【发布时间】：2019-02-25 16:16:14
【问题描述】：

我有以下商店。

MyStore.vue

export default {
  namespaced:true,
  state: {
    data: [],
  }
  // actions, mutations, etc
}

我想知道新数据何时到达商店。

MyOtherVueFile.vue

export default {
  computed: {
    getFoo() {
      return this.$store.state.MyStore.data;
    },
  },
  watch: {
    getFoo(newValue, oldValue) {
      console.log(`New ${JSON.stringify(newValue)}`);
      console.log(`Old ${JSON.stringify(oldValue)}`);
    }
  },
}

但是控制台总是将新旧数据显示为同一个对象。这是这样做的正确语法吗？

仅供参考 - 我需要捕获新项目何时添加到 vuex 存储数据中，因为我将它们直接添加到 OpenLayers 地图中。

【问题讨论】：

你能提供这个的代码吗？根据使用情况，您不需要查看 vuex 存储值，因为它们是反应式的。
你需要初始化MyStore等状态为：{...} 以使数据反应
对不起，但我正在尝试做的事情有点超出反应性，因为我正在处理 OpenLayers

标签： vue.js vuex

【解决方案1】：

我通过

解决了

this.$store.subscribe((mutation,state) => {
  if (mutation.type === 'myStore/MyMutation') {
    const myData = mutation.payload.data.forEach(x=> etc...
  }
});

【讨论】：

【解决方案2】：

您可以像这样直接查看商店属性：

watch:{
  '$store.state.data'(value, oldValue) {
  }
}

您还可以使用“deep”和“handler”语法来观察对象的子属性。

如果你想要一个数组的旧数据，你需要在监视处理程序中进行深拷贝或浅拷贝，并在组件中维护它。

不幸的是，在使用对象和数组时，您将无法看到对象的旧状态和新状态，除非实际对象发生变化（替换，而不是变异）。

【讨论】：

所以没有办法知道新对象何时添加到数组中（除了手动循环并询问它）？
subscribe/subscribeAction 是否能够处理命名空间存储？如果是这样，那可能就是我正在寻找的......？ vuex.vuejs.org/api/#watch
如果你需要一个深度比较，你可以使用一个对象比较库，或者像 JSON.stringify(a) === JSON.stringify(b) 那样做一个漂亮的hack来做一个深度比较。您可以通过预先检查数组长度来加快速度。
这里：stackoverflow.com/a/46097506/1706618 还有另一种观察商店变化的方法