看一个 vuex 商店

Question

我有以下商店。

我的商店.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 地图中。

Answer 1

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

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

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

如果需要数组的旧数据，则需要在 watch 处理程序中进行深拷贝或浅拷贝，并在组件中维护它。

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

Answer 2

我通过解决它

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