watching a vuex state inside nested modules and login its value in a component whenever it changes

Question

I know a similar question has been asked here but mine is a little bit different, the state I want to watch is inside some nested modules. on the link above they suggested I can watch the state like this:

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

But my state is in nested modules as I mentioned, something like store/moduleOne/moduleTwo/moduleThree They suggested to do this:

$store.state.moduleOne.moduleTwo.moduleThree.something

But I tried it and many more variations and it didn't work! I asked on the original post and no answers!

So my question is how can I watch a state, let's call it price and let's say it's in store/moduleOne/moduleTwo/moduleThree and then log its value in my component whenever it changes using (using map functionalities is no problem and is preferred)

That might not be a good practice, as much as possible make it only 1 level, The watcher or vue devtools might not track its changes due to level of nested and will cause drawback in future — Forbidden, Dec 03 '21 at 06:48
You can watch for getter instead, like **$store.getters.GET_STATE_TO_WATCH** — Vasile Radeanu, Dec 03 '21 at 10:05

score 0 · Answer 1 · answered Dec 03 '21 at 23:59

Assuming nested modules declared in Vuex 4 like this:

import { createStore } from 'vuex'

export default createStore({
  modules: {
    moduleOne: {
      namespaced: true,
      modules: {
        moduleTwo: {
          namespaced: true,
          modules: {
            moduleThree: {
              namespaced: true,
              state: () => ({
                price: 0,
              }),
              mutations: {
                SET_PRICE(state, price) {
                  state.price = price
                },
              },
            },
          },
        },
      },
    },
  },
})

...the watcher on the price state in moduleThree would be:

export default {
  watch: {
    '$store.state.moduleOne.moduleTwo.moduleThree.price'(price) {
      console.log({ price })
    }
  }
}

demo

watching a vuex state inside nested modules and login its value in a component whenever it changes

1 Answers1