Установщик вычисляемого свойства не вызывается при изменении свойства модели

Question

У меня есть поле с v-model="data.field" и вычисляемое свойство:

data: {
  get() {
    console.log("getting value")
    return this.$store.getters.data
  },
  set(value) {
    console.log("set data " + value)
    this.$store.commit('SET_DATA', value)
  }

Но это не работает, сеттер никогда не вызывается. Однако, если мы изменим v-model="data", все будет работать правильно. Пример: codeopen.io

Answer 1

Сеттеры выполняются только при изменении переменной, а не при изменении поля внутри них. Измените вычисляемое свойство, чтобы оно работало непосредственно с самим полем:

data: {
    get() {
        console.log("getting value")
        return this.$store.getters.data.field
    },
    set(field) {
        const value = {...this.$store.getters.data, field}
        console.log("set data " + value)
        this.$store.commit('SET_DATA', value)
    }

А затем измените v-model на:

v-model="data"

Answer 2

Это потому, что вы пытаетесь изменить переменную store, когда вместо этого нужно изменить state.

Примечание: это для вашего магазина mutations

Изменить это:

SET_ITEM (state, item) {
  console.log("set item " + item)
  store.item = item
}

до:

SET_ITEM (state, item) {
  console.log("set item " + item)
  state.item = item
}

Возможно, вам также следует сменить и другой сеттер.