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)}`);
    }
  },
}

但是，控制台始终将新数据和旧数据显示为同一对象。这是正确的语法吗？

仅供参考-当我将新项目直接添加到OpenLayers Map中时，我需要捕获何时将新项目添加到vuex商店数据中。

Answer 1

您可以像这样直接观看商店财产：

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

您还可以使用'deep'和'handler'语法来监视对象的子属性。

如果要为数组使用旧数据，则需要在监视处理程序中进行深拷贝或浅拷贝，并将其维护在组件中。

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

Answer 2

我通过

解决了

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

观看Vuex商店

2 个答案: