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.
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.
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:
sumis the state
incrementare 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 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
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.
Each Vue instance has a
store property. Let’s pass our store to the Vue instance.
Passing store property to Vue
Calling actions inside Vue components
$store is a global object which contains all
mutations and much more functionality. The
$store object gets injected into every Vue component —very convenient.
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.
Now we get the desired results.
Calling Vuex actions and mutating Vuex state
Imagine if our state was a bit more complicated, think 2–3 objects deep — common with forms. Instead of writing
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 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!