Search code examples
vuexflux

Vuex store vs component props: When use each method for component communication?


I learnt Vuex about 2 weeks ago. I think I have a pretty solid understanding of what Vuex (or Flux) is and how it works.

What I still haven't got is the feeling for when I should put a property in a store and when not. Do you know some guidelines on when to do it?

An obvious situation is, when components that need the same information are far from each other in component hierarchy. But what if they are close (are siblings or in a parent-child relation)? Do you always use component props to communicate values in such situations? If not, then when not and why?

Going extreme, in many situations I could imagine most of the values stored in a store and components having almost none props at all. Such situation would feel weird to me, but I'm wondering if maybe there is nothing wrong with such approach.


Solution

  • they say, Vuex is like glasses, you know when you'll need them.

    But this is presumptuous at best. So at the risk of this question being closed as primarily opinion based...

    I would say that using Vuex has three benefits:

    • Ease of access to data, no matter how far the components are
    • The store is a single source of global state
    • Good at handling asynchronous data changes

    if you can meet two criteria, then it's a definite yes. But just because you have data between a parent and a direct descendant, doesn't mean you shouldn't use vuex. I often use vuex for items in the same component, but if the data is available to other components or especially if it is asynchronous (uses API) then it can still go into vuex.