CODEWITHSUNDEEP
vue.jsvuejs2vuexnuxt.js
Meena Chaudhary
Meena Chaudhary

Reputation: 10695

VueJS: Watching Vuex getter in multiple components not working

I have a Vuex state processState that has below getter

export const getters = {
  getProcessState: state => {
    return state.processState;
}

I am watching this getter in two different components like below

<script>
import { mapGetters } from "vuex";

 export default {
   computed: {
     ...mapGetters("process/processStore", ["getProcessState"])
   },
   watch: {
     getProcessState(newVal, oldVal) {
       //different logic for each component.
     }
   }
};
</script>

Now when processState changes, getProcessState(newVal, oldVal) in only one component is invoked. If I comment out the watch in the component in which it is invoked the other one starts working. So at one time only one is working. Is there something about Vuex or watch I am missing that is causing this problem?

Thanks

Update I tried watching the getter in a third component. but it is not also invoked.

Upvotes: 1

Views: 4367

Answers (2)

user12627970
user12627970

Reputation:

If you getters is not returning a scalar (i.e. if it is returning an Object {} or array []), you have to watch it like so:

watch: {
  getProcessState: {
    deep: true,
    handler: function(newVal, oldVa) {
     // Your logic
    }
  }
}

Upvotes: 3

Rijosh
Rijosh

Reputation: 1544

Try directly using the getter without mapping

    watch: {
        '$store.getters.getProcessState': function (value) {
            // your logic
        }
    }

Upvotes: 0

Related Questions