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.
Advertisement
Answer
From the docs you’ve linked (emphasis mine):
You can commit mutations in components with
this.$store.commit('xxx')
, or use themapMutations
helper which maps component methods tostore.commit
calls (requires rootstore
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.