vue & vuex getter vs passing state via props

It will cause a mess, you are correct. This is one of the problems that vuex solves.

So how do you decide whether to pass props or use vuex? When i say use vuex, i mean to access the store data directly from the component that needs it. The trick is to consider each piece of data’s relationship to the overall application.

Data that is used repeatedly throughout the page, down many DOM hierarchies, in different pages, etc, is the ideal case in which to use vuex.

On the other hand, some components are so tightly coupled that passing props is the obvious solution. For example, you have a list-container component, whose direct child is the list component, and both of them need the same list data. In this situation, i would pass the list data down to the list component as a prop.


You may be interested in the instance property $attrs

https://v2.vuejs.org/v2/api/#vm-attrs

along with it’s sibling option inheritAttrs.

https://v2.vuejs.org/v2/api/#inheritAttrs

Using these 2 in combination allows you to pass props down multiple component levels with less boilerplate code.

Leave a Comment