Побочные эффекты-в-вычисленных-свойства

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.