Question

使用vuex，我收到一个对象，让我们假设

user: {name: 'test'}

在app.vue中，我使用this。$ 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
   } 
}

但是在棉绒上，我得到了这个错误“计算属性中的意外副作用”（数据“名称”应用作v模型，用作更新API参数）。我知道，如果您知道自己在做什么，可以忽略它，并且会触发它根据计算设置数据，但是为什么会触发此错误？以及解决方法？

Answer 1

请勿在计算中设置值。如果您需要获取计算用户的名称，则必须创建新的计算用户：

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

Answer 2

Vue同时具有计算的吸气剂和setters。如果像上面那样定义计算属性，那么它只是一个吸气剂。吸气器只能“获取”一个值，并且应该是一个"pure" function而不是side effects，以便于阅读，调试和测试。

从docs中查找触发代码上的掉毛错误的规则：

在内部引入副作用被认为是非常不好的做法计算属性。它使代码不可预测且难于执行明白。

在您的情况下，您可能想对user或name值使用计算的设置器，以便可以将它们用作v-model。例如，您可以这样做：

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

为什么我不应该从计算中设置数据？

2 个答案: