Почему я не должен устанавливать данные из вычислений?

Question

Используя vuex, я получаю объект, предположим, что

user: {name: 'test'}

И в app.vue я использую это. $ Store.getters.user

computed: {
   user: function() {
       let user = this.$store.getters.user
       return user
   }
}

При настройке также данныхобъект 'this.name'

data() {
   return {
      name: ''
   }
}

computed: {
   user: function() {
       let user = this.$store.getters.user
       this.name = user.name
       return user
   } 
}

Но в ответ я получаю эту ошибку «неожиданный побочный эффект в вычисляемом свойстве», (имя «data» следует использовать как v-модель, чтобы использоватьв качестве параметра обновления API). Я знаю, что его можно игнорировать, если вы знаете, что делаете, и что он запускается для установки данных из вычисляемых, но почему он вызывает эту ошибку? и как это обойти?

Answer 1

Vue имеет как вычисленные геттеры, так и сеттеры . Если вы определяете вычисляемое свойство, как вы делали выше, это всего лишь метод получения. Метод получения предназначен только для «получения» значения, и это должна быть «чистая» функция без побочных эффектов , чтобы его было легче читать, отлаживать и тестировать.

Из документов для правила, которое вызвало ошибку кодирования в вашем коде:

Вводить побочные эффекты в вычисляемые свойства считается очень плохой практикой. Это делает код непредсказуемым и трудным для понимания.

В вашем случае вы можете использовать вычисляемый установщик для значений user или name, чтобы вы могли использовать их какv-model s. Вы можете, например, сделать:

computed: {
  user: function () {
    return this.$store.getters.user;
  },
  user: {
    // getter
    get: function () {
      return this.user.name;
    },
    // setter
    set: function (newValue) {
      this.$store.commit('setUserName', newValue);
    }
  }
}

Answer 2

не установить значение в вычислено . если вам нужно получить имя вычисляемого пользователя, вы должны создать новое вычисляемое:

   user: function() {
       let user = this.$store.getters.user
       return user
   },
   name: function() {
       if(this.user.name!=undefined) return this.user.name
       return ''
   },

и удалить имя из data

, но если вам действительно нужно задать имя, вы можете watch пользователь и набор name

watch: {
   user(newVal) {
      if(newVal.name!=undefined) this.name = newVal.name
   }
}