Vuejs 计算，使其反应

Question

我需要将计算值保存在我的数据库中，但我似乎无法通过以下示例访问它：

computed: {
    total: {
        get: function() {
            return this.items.reduce(
                (acc, item) => acc + (item.price * item.quantity) * (1 - item.discount/100), 0
            )
        },
        set: function(newValue) {
            console.log(newValue);
            // this.tototata = newValue;
        }
    }
},

在模板中，计算值运行良好，但控制台中没有任何显示

我正在使用 vue 2.6.11

这是最好的方法吗？我应该使用方法吗？

Answer 1

我认为 computed setter 是在手动设置计算值时调用的。例如，如果您执行类似 this.total = newTotal 的操作，将触发 setter。为了在更新时将计算值保存在数据库中，您可能需要设置一个观察者：

computed: {
  total: {
    get: function() {
      return this.items.reduce(
        (acc, item) => acc + (item.price * item.quantity) * (1 - item.discount / 100), 0
      )
    }
  }
},
watch: {
  total(newValue) {
    // Save to database
  }
}

您可以在此处阅读有关 Computed Setter 的更多信息。希望能帮到您解决问题。

Vuejs 计算，使其反应

Vuejs computed, make it reactive

mutators

vue.js

computed-properties

vuejs2