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

Я хочу, чтобы в моем коде не было побочных эффектов, но я не знаю, как их исправить, может ли кто-нибудь помочь?

    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 computed-properties vuejs2
person Pablo Fernandez    schedule 16.05.2019    source источник
comment
Или кто-то может подробнее рассказать об этом? ????‍♂️ ????   -  person Pablo Fernandez    schedule 16.05.2019

Ответы (2)


arrow_upward
3
arrow_downward

Вы не должны редактировать данные какого-либо компонента Vue в вычисляемом свойстве. Здесь вы изменяете this.totalVerduras, который считается данными компонента Vue.

Вы можете изменить на:

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

arrow_upward
1
arrow_downward

Вы также можете сделать это:

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

Этот метод избавляется от переменной totalVerduras и цикла for.

person Krantisinh    schedule 16.05.2019