Search code examples
vue.jsvuex

Provide/inject or Vuex?

I have a list of cars. Each item of that list has all the information about some of the cars. Also each item is a parent component to many other components - image, price, characteristics, etc - all that info is in separate components. The information about all those cars is stored in Vuex. Now I am trying to think of a better way to pass that information to each of the list items.

  1. Pass all the necessary data about another car to the parent component. And then provide it to the child components.
  2. Each child component gets the necessary information from Vuex directly.
Solution

  • Provide-inject is mainly used to pass data to nested components.

    Vuex on the other hand, keeps the app state shared.

    You need to ask yourself whether the data you need in your component is coming from a parent-parent component or the data is used in many components in different parts of the app. If you need the first, then go with the provide-inject, otherwise, pick Vuex.

    Both approaches are prone to be badly implemented and potentially impact negatively on your app development and maintainability, so be very careful and learn the basics in-depth ;)