Why Am I getting error return in computed property?

1
votes

I'm using Vuex, inside Getter Foo function I'm returning two values inside array:

return ["Try Again"] or return ["Data result", data], in computed, I'm checking the array length and returning depending on result

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

but I'm getting this error, even reading others posts I cannot solve it

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

2
vue.jsvuex
may be duplicate of stackoverflow.com/questions/53757107/… – daremachine

2 Answers

2
votes

You are not permitted to change the state in computeds. Try using another computed instead of 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
    }
  }

Now you should remove existFoo from state

1
votes

You could use a watcher to watch the store value and set your local variables.

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

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