Vuex gettets vs props

As part of a large scale project, we chose to use Vuex.
there is a case that I want to understand the best practice for it.
let say we have a parent with a few different child components
PARENT -> child1, child 2, child 3
usually, every child has more children of course.
now we will use it in 2 different cases:
one from category A let’s call it BLUE, second from category B = GREEN
the category defined by the URL route. or
so the state gets category name in the first instance.
the best practices I’m asking for are for those cases:

  1. how to use it for styling?
    we gave Class name to the parent component (green/blue), and then in the child component we using Sass - .green { a {} }, .blue { a {} };
  2. how to use it for text and pther data uses,
    should we pass props to each child with category name? or to use vuex getter of “categryName”?

maybe any other way?


Since it’s route based why don’t you use this.$ ?

Otherwise yeah I’d use Vuex getter.

Also for question 1 what’s the question? That’s a good way to do it