Demystifying Vuex — The state container for Vue

Demystifying Vuex — The state container for Vue

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 — look no further.

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?

Dan Abramov, the author of Redux:

Flux libraries are like glasses: you’ll know when you need them.

State containers prevent us from writing spaghetti code.

Vuex is only for Vue — if you’re unsure about Vue, this series will get you up and running.

Getting started

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

We have a Vue project with a simple counter. The counter consists of three parts: the state of the current sum, a decrement button, and an increment button.

In Vuex terms:

  • sum is the state
  • decrement and increment are actions to change the state

Classical Vue component

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

Adding Vuex dependency

The first thing we need to do is create a Vuex store. Here’s what the store looks like.

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 the state, actions, mutations and getters. They all have a critical role and everything fits very nicely together.

State keeps track of everything. Actions do 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 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 even simplify by writing store 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 which 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 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 one has 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 clicking on the counter — why? So far we are reading 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 2–3 objects deep — common with forms. Instead of writing

1
this.$store.state.form.username.pet[2]

inside our templates, we can get the computed state and pass 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 on the left (preferred), ES5 on the right

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 create a computed property and map 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 mapGetters function:

mapGetters helper function

One of the key features of any state containers is 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!

Here’s the code for this article.

# vue, vuex
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×