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

【问题标题】：Computed property's setter isn't invoked when change model property更改模型属性时不调用计算属性的设置器
【发布时间】：2018-10-09 01:15:44
【问题描述】：

我有一个带有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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

这是因为您试图修改变量 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
}

您可能还应该更改其他设置器。

【讨论】：

你说要更改的store.item部分来自哪里，但不在OP的代码中？
@Ferrybig 看看他的密码笔？他对商店的突变是错误的

【解决方案2】：

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"

【讨论】：