Vuex: State management tool for Vue.js

Build a scalable application by implementing Vuex (a state management tool).

Introduction:

In modern complex SPAs (single page applications) managing state & keeping all components synchronized is a very difficult task. The common way to solve this problem is by using events. This solution works perfectly until you have a small application. But In case of a large application with complex data flow, this approach will create some additional problems like debugging of the application, synchronizing the component & fixing of issues will become very difficult.

Facebook solved this problem in a unique way by using flux architecture. Redux is the simplified implementation of flux. Following are the advantages of Vuex/Redux.

1. Maintain application state in a predictable way.
2. Centralized store for a single state of truth.
3. Time travel debugging.

Vuex is a state management pattern + library based on redux for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. In this story, we are going to learn how to setup Vuex for a large scalable application by creating a simple to-do application.

Setup Vue & Vuex

We are going to build a to-do application using Vuex.

1. Install Vuex in your application by triggering the command below.

npm install vuex --save

Folder structure for Vuex store:

Folder structure for Vuex store

In our modules/todo.js file.

The above file contains the following parts:

1. State: State is an object which contains data. The state is reactive in nature.
2. Getters: When more than one component depends on the computed value it will increase the boilerplate. Therefor getters are used to handle computed values inside the store.
3. Mutations: Mutations are used to update the state. These are synchronous in nature.
4. Action: Actions are similar to mutations. Instead of mutating the state, actions commit mutations. It can contain asynchronous operations.

In our store/index.js file.

import Vue from 'vue';
import Vuex from 'vuex';
import todos from './modules/todo';
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
       todos
    }
});

In the above code, we have imported Vue & Vuex. To activate Vuex we need to call “Vue.use(Vuex)”.

For a large & complex application, instead of using a single store with a big object we can divide the store into number of modules. This approach will improve the maintainability & scalability of the application. Vuex allows us to divide the store into multiple modules. Each module can contain its own state, mutations, actions, getters, and even nested modules.

Using Vuex store in the component:

In our App.js file

In the above example, When addTodo() method is called we are dispatching an action with todo_message parameter to the Vuex store. This will call the action. We can either do some asynchronous operation or proceed to change the state by committing mutation.

The mutation will change the state. Changes will reflect in the vue component.

mapGetter([‘todo’]) is used to access to-do value inside the component.

Time Travel Debugging:

One of the most interesting features of Vuex is Time Travel Debugging. To use this feature install “Vue.js devtools” & open Developer tools in your browser.

Summary:

Vuex is the simplified implementation of Redux for Vue.js applications. You should use Vuex only for a large application with complex dataflow. Using it in a small application will increase unnecessary complexity.

Visit the GitHub repository here.

sumeet-ru/vuex-demo