为什么我在计算属性中收到错误 return？

Question

我在 Getter Foo function 中使用 Vuex 我在数组中返回两个值：

return ["Try Again"] 或 return ["Data result", data]，在计算中，我正在检查 array length 并根据结果返回

  computed:{    
    Foo: function(){
      const getFoo =  this.$store.getters.Foo;
      if(getFoo.length === 1) {
        this.existFoo = false
        return getFoo[0]
      }
      this.existFoo = true
      return getFoo
    }
  }

但我收到这个错误，即使阅读其他帖子我也无法解决

34:9 error Unexpected side effect in "Foo" computed property vue/no-side-effects-in-computed-properties
37:7 error Unexpected side effect in "Foo" computed property vue/no-side-effects-in-computed-properties

Answer 1

您无权更改计算中的状态。尝试使用另一个计算而不是 existFoo

  computed:{        
    Foo(){
      if(this.$store.getters.Foo.length === 1) {
        return this.$store.getters.Foo[0]
      }          
      return this.$store.getters.Foo
    },
    existFoo(){
        return this.$store.getters.Foo.length > 1
    }
  }

现在您应该从 state

中删除 existFoo

Answer 2

您可以使用观察器来观察存储值并设置局部变量。

computed: {
  getFooFromStore() {
    return this.$store.getters.Foo
  }
}

watch: {
  getFooFromStore: function() {
    this.existFoo = this.getFooFromStore[0] ? false : true;
  }
}

为什么我在计算属性中收到错误 return？

Why Am I getting error return in computed property?

vue.js

vuex

为什么我在计算 属性 中收到错误 return？

Why Am I getting error return in computed property?

vue.js

vuex

为什么我在计算属性中收到错误 return？