ESTIMATE PROJECT
  • Technology
  • by Volodymyr Hudyma
  • 13/12/2017

State management in vue.js

If you’re front-end developer and you’re using JavaScript on the daily basis then probably you’ve asked yourself a question – “What tools can be used to make the developing process easier, more clear and faster?”.

Nowadays we have a big stack of technologies that would work out for you. One of the most progressive and the easiest to learn JavaScript frameworks for building user interfaces is Vue.js. It is MIT-licensed open-source project that has awesome community support.

If you wrote an application using Vue that’s a little bit bigger than small, probably you know that it’s difficult to keep track of your app’s state when it grows. There’s so much data moving around from one component to another. That’s the reason why Vuex, state management library for Vue, based on Flux pattern, appeared. Sounds cool, huh? Let’s get our hands dirty with Vuex.

Of course, using state management solutions is not always required. If your application is small and you don’t have much data flow inside then you have less need to implement it. In other case, let’s assume we have simple blog app with the following structure:

Looks simple, right? If we have a need to move data from App component to BlogItem, we have to send it via BlogList first. Still looks simple? But what if we’ll add another child to BlogItem? The data should flow via 2 middle components to get to that child. It’s getting worse, right? Imagine that child having Button element. When the button is clicked, you have to notify BlogItem element that will notify BlogList and finally App. Writing this is a bit tedious, not telling about implementing it in a real project.

Right, right, you can keep local states for every component and that will work. The problem is, you will easily loose track of what exists and why a particular event is happening at a given time. It is very easy to loose data sync that ends up in a pool of confusion.

That’s where the Vuex comes into play. It will manage your application’s state. Your data flow will come from one source named “store” and you’ll be easily able to keep track of what’s happening in your app.

State

State – is the current working status of your app. It is determined by what data exists and where in the given time.

In Vuex state is the plain object:

Looks simple, right? Let’s add Vuex to your existing Vue.js project(how to create Vue.js project you can read here at the official documentation: https://vuejs.org/v2/guide/ ).

Store

Store in Vuex is an object that keeps the application’s state. Just everything about the state stored there. You can create a store instance using the following code:

You can pass store options as an object.The state that has been discussed previously is passed in alongside with other store members that we will discuss in following sections.

After the store has been created, there’s a need to tell Vue that this store will be used.

Accessing store state

After successful store set up and letting Vue know about it, we would like to know how we can access the store state. Vuex state is reactive, therefore it can be threatened as the usual reactive object returned from a data function. We will use computed property to retrieve the state. That’s easy-peasy:

The computed property blogItems can then be bound to the template using interpolation.

Store getters

We will violate DRY when more than one component depends on a computed value because we will have to compute for each component. So, it’s best to handle computation inside the store using the getters property(each getter has an access to state using the state variable that’s passed to its arguments by default):

 

Mutations

Mutations are synchronous functions that are used to update state. As the first agrument, mutation receives state, the second one – is a variable that’s passed by user. Remember, this is the only proper way to update state in Vuex – MU-TA-TI-ONS. You shouldn’t even think about directly mutating state, like this:

The right way to do it:

Mutations are like events. To call them, you have to use the commit
method:

Store actions

Actions – are asynchronous functions that are mainly used to fetch data from external sources. They allow you to carry out async operations and then commit mutations as soon as async operations are completed.

To fire action within component, you have to use dispatch method:

Final notes

We’ve covered basic Vuex flow in details, so have fun trying to build an amazing app using state management for Vue.js.

Do you like article?

Volodymyr Hudyma

Frontend Developer

A programmer with passion, determined and open to new knowledge and experience. Fluent in coding and foreign languages as well. Passionate about the gym and literature.

Let's work together.

Are you ready to build the future together?

ESTIMATE PROJECT