Skip to content

Does the store object in vuex fall through to leaf components?

Following the docs:

https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components

and the video tutorial:

https://scrimba.com/scrim/ckMZp4HN?pl=pnyzgAP

it’s not clear (to me) whether store is visible in nested/child components present in the component that includes it.

Answer

From the docs you’ve linked (emphasis mine):

You can commit mutations in components with this.$store.commit('xxx'), or use the mapMutations helper which maps component methods to store.commit calls (requires root store injection)

If you’ve set up Vuex so that you have “root store injection”, then this means that store is globally accessible within your Vue instance.
That is– store, through the $store instance property, is an accessible property (is visible) in every nested/ child component present in the entire Vue instance component tree.

This is arguably what makes Vuex so powerful; Vuex allows all components to have state access, but still maintains detailed tracking for every state interaction that occurs.