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

但这不起作用，从未调用过setter。但是，如果我们更改v-model="data"，则一切正常。示例：codeopen.io

Answer 1

Setter仅在变量发生变化时执行，而不是在变量内部变量时执行。将您的计算属性更改为直接在字段本身上工作：

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
}

你也应该也改变另一个setter。

更改模型属性时，不会调用计算属性的setter

2 个答案: