计算属性中的副作用答案

【问题标题】：Side-effects-in-computed-properties计算属性中的副作用
【发布时间】：2019-10-03 06:21:17
【问题描述】：

我想避免在我的代码中出现副作用，但我不知道如何解决这些问题，有人可以帮忙吗？

    computed: {
        sumarVerduras(){
          this.totalVerduras = 0;
            for( const verdura of this.verduras){
              this.totalVerduras = this.totalVerduras + verdura.cantidad
            } return this.totalVerduras;
        }
      }

它可以按我的意愿工作，但有副作用

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Unexpected side effect in "sumarVerduras" computed property (vue/no-side-effects-in-computed-properties) at src\App.vue:53:7:
  51 |   computed: {
  52 |     sumarVerduras(){
  53 |       this.totalVerduras = 0;
     |       ^
  54 |         for( const verdura of this.verduras){
  55 |           this.totalVerduras = this.totalVerduras + verdura.cantidad
  56 |         } return this.totalVerduras;


error: Unexpected side effect in "sumarVerduras" computed property (vue/no-side-effects-in-computed-properties) at src\App.vue:55:11:
  53 |       this.totalVerduras = 0;
  54 |         for( const verdura of this.verduras){
  55 |           this.totalVerduras = this.totalVerduras + verdura.cantidad
     |           ^
  56 |         } return this.totalVerduras;
  57 |     }
  58 |   }

【问题讨论】：

或者有人可以解释更多关于这些的信息吗？ ????‍♂️ ????

标签： vue.js vuejs2 computed-properties

【解决方案1】：

您不应该在计算属性中编辑任何 Vue 组件的数据。这里修改this.totalVerduras，这被认为是Vue的组件数据。

你可以改成：

computed: {
  sumarVerduras() {
    let totalVerduras = 0;
    for (const verdura of this.verduras) {
      totalVerduras = totalVerduras + verdura.cantidad
    } 
    return totalVerduras;
  }
}

【讨论】：

【解决方案2】：

你也可以这样做：

computed: {
  sumarVerduras() {
      return verduras.reduce((a, x) => a + x.cantidad, 0);
  }
}

这个方法去掉了 totalVerduras 变量和 for 循环。

【讨论】：