Demystifying Vuex — The State Container for Vue

Indrek Lasn
Oct 15, 2018 · 5 min read

Vuex is the de facto state management pattern library for Vue.js. Vuex lets us write clean, maintainable, and scalable code. If you’re looking to learn the concepts behind Vuex — read on.

Vuex, Redux, and other state containers are crucial for building apps that scale. In simple words, state containers force us to do things in certain ways to write clean code.


How Do I Know If I Need a State Container?

“Flux libraries are like glasses: you’ll know when you need them.” — Dan Abramov, author of Redux.


Getting Started

Simple counter — https://codesandbox.io/s/6ll5krx5rn

We have a Vue project with a simple counter. The counter consists of three parts:

In Vuex terms:

Classical Vue component

Let’s refactor the Vue component to a Vuex component. Every Vuex application has a store that holds the state:

Adding Vuex dependency

The first thing we need to do, is create a Vuex store.


Creating the Store

Creating Vuex actions

Look familiar? The actions and state are like the ones in the Vue component.

The store is an instance of the Vuex.store object, which consists of four objects. The four objects are state, actions, mutations and getters. They all have a critical role and everything fits nicely together.

The state keeps track of everything. Actions take care of all the logic and conditionals and pass the end result to mutations. Mutations change/write the change, and finally, getters are meant to read from the state.


Passing the Vuex Store to the Vue Instance

Each Vue instance has a store property. Let’s pass our store to the Vue instance.

Passing store property to Vue

We can actually simplify this, by writing the store only once, since they are both named the same and JavaScript is smart enough to shorthand this. You can only do this if they are identical (case sensitive).


Calling Decrement and Increment Actions Inside Vue

Calling actions inside Vue components

The $store is a global object that contains all actions, states, getters, mutations, and much more functionality. The $store object gets injected into every Vue component —very convenient.


Using the Vuex Sum State Instead of the Local Data State

Notice how we’re letting Vuex keep track of our state and actions, instead of Vue. Vue only renders the markup and styling. The fewer things you have to do, the better the result. Do one thing at a time, but do it really well.

The current state of our app

Nothing happens when you click on the counter — why? So far we’re reading the state from Vuex, telling Vuex what the next state is, but we’re not actually “mutating” the state. Actions commit the new state change; mutations change the state.

Creating mutations

Now we get the desired results.

Calling Vuex actions and mutating Vuex state

Reading the State With Getters

Imagine if our state was a bit more complicated — think two or three objects deep — common with forms.

Instead of writing $store.state.form.username.pet[2] inside our templates, we can get the computed state and pass it to our template. This drastically cleans up the code. The Vue template should render markup and deal with outside logic as little as possible.

ES6 (preferred), ES5 below.
ES5

Simple, we map a function to a key and return the desired state inside the function. If you come from the React world, think of getters as selectors.

Back inside our Vue component, we’ve create a computed property and mapped our Vuex getter to it.

Creating computed getters

Notice how the markup is clean once again — that’s the whole point.

Here’s the shorthand to the computed getter with the help of the mapGetters function.

mapGetters helper function

One of the key features of any state containers are the amazing state inspection tools. Vue.js dev tools has a Vuex inspector out of the box.

Inspecting Vuex state with Vue dev tools

Amazing! Debugging conditions have never been any better!

If you like working with Vue and want to learn it in more depth, here’s a great book on full-stack Vue.


Here’s the Project

There you go, that’s as simple as Vuex can get. This should be a good starting point to adopt Vuex to your Vue applications.

Thanks for reading!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Software Engineer. I try to be kind and friendly. Let’s change the world together for the better. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade