Have you ever heard the response: “you’ll just know”, when asking someone when you should use Vuex.

Yeah, me too. When you ask this question anywhere online you get some good advice but you also get a lot of vague answers like:

“You’ll just know” or “Vuex solves specific problems” (never actually says what kinds of problems)

Hopefully with this post I’ll help you to know when it’s a good time to start using Vuex.

I’m assuming you have an idea of what Vuex is if you found this page but just in case you don’t, here’s how the actual Vuex website describes it:

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Essentially, Vuex allows you to move your state out of your components, and into one giant object that can be accessed from anywhere in your app.

So, when you should use it? Here’s two common situations:

1. You have to pass data down through more than 2 components

Say your app structure looks like this:

ParentComponent
    ChildComponentA
        ChildComponentB

Then let’s say your ParentComponent requires certain data that ChildComponentB also needs. Without Vuex you’d create a prop in ChildComponentA and ChildComponentB. You’d pass the data from the ParentComponent to ChildComponentA then to ChildComponentB. ChildComponentA isn’t using that data, it’s only passing it along. While that might not be the worst thing in the world, as your app grows, it can get messy. So, if you are finding yourself with a situation like the above, it would be a good idea to take a look at Vuex.

2. You have multiple components that need to access the same data

This is a common situation when you have a user login system in your app. There’s going to be many spots throughout your app where you’ll need to know if a user is logged in or not. Creating props and passing user login information all around your app will be and is a pain. So, if you have some kind of data, like user login data, in your app, I would suggest you use Vuex.

With that said, when shouldn’t you use Vuex?

If you’re building an app that has relatively few components, that can all work individually and don’t need to share too much information around, you don’t need to use Vuex.

Can your components still have their own state while also using Vuex?

Yes! This is perfectly ok to do. If you’re building an app with Vuex and you have a component that is using state that isn’t accessed or changed anywhere else in your app, you should keep that out of Vuex and in your component.

Hopefully that cleared up some of the questions you might have had about when you should use Vuex. Personally, if I know my app is going to be even a little complicated I tend to start using Vuex right out of the gate rather than wasting time building without it and then going back and adding it in. It’s not a ton of overhead and it’s a very helpful tool.

If you have any questions about Vuex or have any feedback, feel free to leave a comment below!