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.
We have a Vue project with a simple counter. The counter consists of three parts:
- The state of the current sum.
- A decrement button.
- An increment button.
In Vuex terms:
sumis the state.
incrementare actions to change the state.
Let’s refactor the Vue component to a Vuex component. Every Vuex application has a store that holds the state:
The first thing we need to do, is create a Vuex store.
Creating the Store
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
getters. They all have a critical role and everything fits nicely together.
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.
Calling Decrement and Increment Actions Inside Vue
$store is a global object that contains all
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.
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.
Now we get the desired results.
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 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.
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.
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
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.
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!