Смотря 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

Я решил это через

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

Answer 2

Вы можете напрямую просмотреть свойство магазина следующим образом:

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

Вы также можете использовать синтаксис 'deep' и 'handler' для просмотра вложенных свойств объекта.

Есливам нужны старые данные для массива, вам нужно будет сделать глубокое или поверхностное копирование в обработчике часов и сохранить его в компоненте.

К сожалению, при работе с объектами и массивами вы не сможете увидетьстарое состояние объекта с новым состоянием, если фактический объект не изменяется (заменяет, а не мутирует).