更改模型属性时不调用计算属性的设置器

Question

I have a field with v-model="data.field" , and computed property:

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

But this is not working, setter is never called. However, if we change v-model="data" , all is working properly. Example: codeopen.io

Answer 1

Setters are only executed when the variable changed, not when a field inside of them changes. Change your computed property to work directly on the field itself:

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)
    }

And then change your v-model to:

v-model="data"

Answer 2

That's because you're trying to modify the variable store when you should be modifying the state instead.

Note: This is for your store mutations

Change this:

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

to:

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

You should probably also change the other setter as well.