vue & vuex getter vs passing state via props

Question

I have seen many people advising to pass state to components via props rather than accessing the vue state directly inside the component in order to make it more reusable.

However, if I do this consistently this would mean that only the routes root component would communicate with the store and all data needs to be passed through the nested hierarchy in order to get the final component. This seems like it would easily cause a mess:

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

How would I load data for a users creditcard? In Dashboard and pass it all the way down the tree?

While not really an answer (and a bit late to the party), I would say that rethinking the architecture of the app may solve a lot of your problems without the need to patch it with other solutions. It's hard to tell from this small example, but I would say that CreditCards would be better served hierarchically higher as it doesn't depend on, or is a spin-off of, Billing. If they were siblings rather than parent-child, you wouldn't have to pass down the users data and your data management would be a lot simpler. — Richard KeMiKaL GeNeRaL Denton, Nov 17 '21 at 10:26

score 38 · Accepted Answer · edited Jul 15 '22 at 02:03

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.

I would like to ask one example for the list thing. If there is a List Page and a component to filter the list. The component needs to have information to build the filter max min and value stuff and then the list itself needs to listen on a click event when to do the filter stuff and get the current set filter values. So in my opinion this should be a props solution. But what if the current filter state should be saved? does the list save this after pressing filter and gets the current object or does the component access some kind of filter object in the store? — Vario, Apr 16 '21 at 14:39

score -1 · Answer 2 · answered Nov 02 '17 at 08:09

Every Component, regardless of their Hierarchy position, can communicate with the store.

Inside every Component, you have access the object this.$store so you can dispatch actions, commit data through mutations or read data via getters

Read the documentation for further details:

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.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

The OP is aware of this solution. He is asking about how to decide whether to use this solution (Vuex store) or pass the information via props. — Canol Gökel, Aug 08 '18 at 15:40

vue & vuex getter vs passing state via props

2 Answers2

Linked