by Indrek Lasn
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.
Note: The original article was published under strilliant.com — Please give the original some love too! ❤
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.
Vuex is only for Vue — if you’re unsure about Vue, this series will get you up and running.
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:
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 which holds the state:
The first thing we need to do is create a Vuex store. Here’s what the store looks like.
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 the
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.
Calling decrement and increment actions inside Vue
$store is a global object which 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 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.
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.
Now we get the desired results.
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
$store.state.form.username.pet 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.
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.
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
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.
Amazing! Debugging conditions have never been any better!
Here’s the project
There you go, as simple as Vuex can get. This should be a good starting point to adopt Vuex to your Vue applications.
Liked this? Here are some of my previous articles. Feel free to reach out to me on Twitter. I read my inbox often.
Here are some of my previous articles;
Tutorials by developers to developerswww.strilliant.comThe secret to being a top developer is building things! Here’s a list of fun apps to build!
You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically…medium.freecodecamp.orgFrom Zero to Hero with Vue - But first, why Vue?
Separating your frontend and backend has many advantages:medium.freecodecamp.org