Question

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

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

Answer 1

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

您可以更改为：

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

Answer 2

您也可以执行以下操作：

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

此方法摆脱了totalVerduras变量和for循环的作用。

计算属性的副作用

2 个答案: