When should I use component data instead of vuex state?

Question

As I understand, the best sample of vuex state usage is a shopping cart that can be used by different components or vuex can store auth settings.

But what if I have SPA based on vue-router pages? Should I store page data in vuex state or component.data is good enough for that?

For example, I have SPA with following pages:

/users/
/user/:id
/user/edit/:id

For /user/:id I have the following component structure:

<UserDetailsPage>
    <Address :address="user.billingAddress"/>
    <UserGroupsList :user-groups="user.groups" />
</UserDetailsPage>

UserDetailsPage retrieves data from API and stores user data object in data(). Components like Address and UserDetailsPage receive all data they need from props and just displays data.

Is it a good idea to store user in the page component?

Answer 1

From my understanding, Vuex state management comes into play when you need to communicate or pass data between sibling components, or if a data change in one component (such as a boolean change) triggers a change in another.

For example, Vuex would be helpful if you wanted to store contact or product info from a user, and have it render on a separate component(s) during a checkout process. But if you are just rendering data for a standalone component, then using component data (either binded with simple directives or fetched from an API) is fine.

Usually it becomes apparent when you truly need to use state.

Answer 2

If you need to render same data to multiple components then you should use Vuex store. Vuex store increases code complexity at initial setup level, but afterwords it is so simple and effortless to use API data in to the multiple components. It doesn't mean that use Vuex store in each application. If you are developing application that is progressive in nature and it will get more complex in future then start using Vuex store.