看着一个vuex商店

Question

我有以下商店。

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地图中。

Answer 1

您可以直接观看商店物业，如下所示：

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

您还可以使用“深度”和“处理程序”语法来查看对象的子属性。

如果需要数组的旧数据，则需要在监视处理程序中进行深层或浅层复制，并将其保留在组件中。

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

Answer 2

我解决了它

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