trigger method directly from computed (Vue.js)

Question

I'm working with Vue 3 and VueX.

I want to know if it's possible to check in computed if my returned value is true and than trigger my method directly without an watcher.

Info: this.$store.state.boolean is changing sometimes, so if it's true I want to trigger my method.

Below you can see an example how I'm doing it right now:

//computed
computed: {
  test() {
    return this.$store.state.boolean;
  },
}

//watch
watch: {
  test(boolean) {
    if (boolean == true) {
      this.trigger_method();
    }
  }
},

//methods
method: {
  trigger_method() {
    console.log("TEST");
  }
}

In computed test, you can do something like this if (this.$store.state.boolean) { this.trigger_method() } — Rohìt Jíndal
– Rohìt Jíndal, Commented Aug 2, 2022 at 13:13
You shouldn't trigger any Method or cause any side effects in computed methods, as those are called every update cycle and therefore would cause a huge overhead in the update cycles. The way you implemented it right now is the right way to do this. — IISkullsII
– IISkullsII, Commented Aug 2, 2022 at 13:20
@IISkullsII I think watch will also called on everytime value changes. Hence, it will contains the same load ? Am i right ? — Rohìt Jíndal
– Rohìt Jíndal, Commented Aug 3, 2022 at 4:16
@RohìtJíndal Yes, you are right. Therefore it depends on what the OP wants to achieve in his trigger Method. If it causes any reactive changes, then he should split the Logic like he already did. I suspect it will be any case of a side effect, that would invoke a new update cycle. If he would only return another cacheable Value depending on the Boolean value, he wouldn't need the trigger for a Method, i would assume. — IISkullsII
– IISkullsII, Commented Aug 3, 2022 at 6:21

Mirko t. · Accepted Answer · 2022-08-02 13:26:34Z

You really shouldn't have sideEffects in your computed Functions. see here: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free

Anyways to answer your question, you can do the following:

//computed
computed: {
  test() {
    if (this.$store.state.boolean) {
      this.trigger_method();
    }

    // as this is a getter function you will need to return something.
    return this.$store.state.boolean
  },
}

my recommended approach for your problem would be:

watch: {
  '$store.state.boolean': function() {
    if ($store.state.boolean === true) {
      this.trigger_method();
    }
  }
}

with this you dont need the computed. if you need the computed value somewhere in your code template or any method, you should keep it and use the computed & watch method you are already using but trying to avoid.

Third option, if the Function is not Component specific you could define a subscriber for your Vuex Store, see here: https://vuex.vuejs.org/api/#subscribe

Collectives™ on Stack Overflow

trigger method directly from computed (Vue.js)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related