Vue.js 是否可以创建一个可以直接更改其值的计算 属性 ？

Question

我的计算 属性 在最初安装组件时从存储操作（其中包含 axios 调用）接收信息。但是我需要稍后直接更改它的值：

myComputedProperty: {
  get: function () {
    return this.myStoreActionResult;
  },
  set: function (newValue) {
    return newValue
  }
}

然而，使用此设置，我无法更改其值：

console.log(this.myComputedProperty)
this.myComputedProperty = 'new value!'
console.log(this.myComputedProperty)

我希望它显示初始值（基于商店信息），然后显示新值。相反，它显示初始值的两倍：我不能直接更改计算的 属性 的值。

有没有办法做到这一点，如果有的话，怎么做？

Answer 1

是的，这是可能的。

请参阅此处的 Vue.js 文档：Computed Setter

你的代码会变成这样：

myComputedProperty: {
  get: function () {
    return this.myStoreActionResult;
  },
  set: function (newValue) {
    this.myStoreActionResult = newVaue;
  }
}

Answer 2

计算属性用于返回计算（和缓存）的值，因此您不能直接设置它的值，因为它根本不存在。在计算的 属性 后面是您可以使用 setter 设置的变量，就像在您的示例中一样。您只需要设置引用变量的新值：

myComputedProperty: {
  get: function () {
    return this.myStoreActionResult;
  },
  set: function (newValue) {
    this.myStoreActionResult = newValue;
    return newValue
  }
}

像上面的例子那样使用计算变量是没有用的，因为你间接修改了原来的属性.