Vue JS

Introduction to the State Management in vue with Vuex

Vuex is a state management pattern + library for Vue.js applications. So what is a state management pattern?

Aspiring Data Engineer, SAS Certified Base Programmer

Published · Jun 13 2019

Most people would disagree with the way I define Vuex, but when I first encountered the term “State Manager” it took the guy who explained it to me and I won’t mention names (Oz), 20 minutes to explain what could’ve been explained in five words — Global Variables with extra steps.

Here’s the official definition according to Vuex: “Vuex is a state management pattern + library for Vue.js applications”. So what is a state management pattern? How is it different from global variables? And how should we use it?

State Management Pattern
Let’s say you’re working on a web app made up of a lot of components, with a unidirectional data flow (parent to child)


  

Now let’s say you want to pass back data. One option is the emit function built into Vue.js. That would mean sending the data to all components and whoever needs it will catch it using a listener. (This opens your app to problems, like not initializing the listener in time, resulting in “lost” data between 2 components that should have been similar). 

With basic web apps, not much else is needed, but with more complex web apps, performance can suffer. This is where Vuex comes in, as another layer on top of the other components:


  

All components have access to it, providing a Single Source of Truth for the entire application.

* The fact that you have a place to store all your data does not mean all data should be stored there *
Store vs. Global Variables
There are many differences between the vuex store and global variables, I’ll explain the two that are most significant in my opinion.

One significant difference is that you have a Single Source of Truth object named state and all your data is stored within that object.

The other difference is that you are not supposed to change the data directly like you normally would with global variables. The next example shows what you are not allowed to do:
This reduces the probability that some third-party module or component will change your data.

To change the data correctly you need to use mutations, which are functions that are allowed to change your state. The next example is the way you should change your data:
If you want to manipulate the data, or use an async function you need to use actions functions as following:
And because mutations are always synchronous, debugging the state’s data flow is easy.

Adding Vuex to your project
All you need to do to add Vuex to your project is:
֫  npm install --save vuex

Then, import Vuex (I’ve installed and imported Axios, for demonstration purposes only, no need to use Axios).
Creating a new Vuex store instance
We’ll start by creating a new Vuex store instance, then adding a key called ‘score’, setting the default value of score to 0, and adding a mutation to be able to change the value anytime. Now, let’s say we want to get the score from some API, we will have to create the action as an asynchronous function and then commit the data.
Creating the Vue app
Next, we’ll create a new Vue component called ‘ScoreDashboard’, which will show the score from the store and when mounted, change the value to 10.
Lastly, we’ll create the Vue app, adding ScoreDashboard as a component.
Another way of accessing the store — mapGetters, mapActions
I found it easier to use mapGetters and mapActions in my projects, as just another way of accessing the store. There is no actual difference between the approaches except the syntax. Below is the same code, just using mapGetters and mapActions.

The way to use them is to expand the computed and methods sections of your component, using the spread operator (…).

We learned the meaning of a State Management Pattern, the main differences between global variables and the Vuex store, and how to add a new store to your Vue project. I hope this was helpful and relevant to you and your team.