Watching a vuex store

Question

I have the following store.

MyStore.vue

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

I would like to know when new data arrives in the store.

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

However the console always shows the new and old data to be the same object. Is this the correct syntax for doing so?

FYI - I need to capture when new items are added to the vuex store data, as I am adding them directly to an OpenLayers Map.

Answer 1

I solved it via

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

Answer 2

You can watch a store property directly like this:

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

You can also use the 'deep' and 'handler' syntax to watch sub properties on an object.

If you want the old data for an array, you will need to make deep or shallow copy in the watch handler and maintain it in the component.

Unfortunately when working with objects and arrays, you will not be able to see the old state of the object, with the new state, unless the actual object changes (replacing, not mutating).