Sharing application store state

Question

Im using Vue and Vuex in my application and I have some components. By the time passing I know I will probably have a few more which is gonna be a lot. So I have a problem with sharing the app state within all the components. So I'd like to know which way should I follow? Either passing the state to all the components no matter child or parent, or passing the state to a parent one that will be used in some of its child components and then passing the state to them as a property (however, I do need to import the mutations methods because props are not reactive)?

UPDATE:

Keep in mind though that if a component is going to be displayed or hidden and the conditional statement v-if is attached to the component custom tag, each time the entire component is going to be rendered again! But not if statement was only on some child tags in the component.

Thanks in advance.

Answer 1

What you are asking is a false dilemma. From the official documentation:

By providing the store option to the root instance, the store will be injected into all child components of the root and will be available on them as this.$store.

(emphasis mine)

Which means that sharing the store between components no matter how deep in the component tree is handled for you automatically by vue and vuex.