If you are new to front-end development, you surely have heard about VueJS.

It is a progressive JavaScript framework that lets you create exciting web applications! On the other hand, Vuex is a state management tool that enables you to develop your application.

In this article, we will explore the key difference between VueJs and Vuex.

  1. What is Vuex?
  2. Vuex: The Need For It
  3. State Management Pattern: Solving Concurrent State Changes Problem
  4. The Working of Mutations: Business Logic
  5. Conclusion: Should You Use Vuex?

Vuex vs Vuejs Tutorial

What is Vuex?

As stated earlier, Vuex is a state management pattern plus a library for developing Vue.js applications.

As you should already know, Vue.js applications require state management as there are plenty of components out there. Managing all of them can be tough as the application grows in size. The big giant Facebook learned it the hard way when dealing with their applications. To solve the problem, they needed to create a popular FLUX pattern.

Vuex takes its notes from there so that you can have the same state management solution for your application.

But, before we do so. We need to understand the problem correctly.

Vuex: The Need For It

Vue.JS applications have components inside them, and these components deal with the data directly. So, if a component gets rendered, it is the data within it that gets accessed and then displayed. The data can be anything, including username, blog data, or even critical app information.

In short, we can say that when a component data is changed, its state is also changed. Now, Vue has a very non-efficient way to handle the data. Right now, Vue simply creates a tree of components, and only the adjacent components are aware of the state change. So, if a far-away component state is changed, the information needs to be carried by the intermediate components to the component that can utilize the updated content or state.

This is not efficient, and that’s where the Vuex comes in.

Vuex offers a solution where it provides a global state which acts as a single place to share the changes.

The Global state gives each component the ability to directly connect with other components rather than going back and forth.

So, what happens when multiple components of the VueJS application change state? In that case, one single source will not cut it. To solve the problem, a state management pattern is used.

Let’s learn more about it below.

State Management Pattern: Solving Concurrent State Changes Problem

When you define a new Vue component, you do it by using the following pattern/structure.

const app = new Vue ({
    data: {
        ...
    }

    methods: {
        ...
    }

    computed: {
        ...
    }

})

So ensure that the above component’s data can be shared seamlessly using the Vuex global storage, you also need to use Vuex Store for state capture. As VueJS is reactive, Vuex is also reactive by default. This means the app will refresh the data automatically.

Vuex Store for state capture
The Store variable has all the State, Mutations, Actions, and Getters. In the case of the VueJS instance, you define the methods. In contrast, the Vuex has Actions which deals with the state update process.

The Getters in the Vuex corresponds to the computed properties that are defined in the VueJS. This allows the app to work with derived, filtered, or computer states.

Lastly, we get the mutations in Vuex which is different than that of the VueJS template/structure. The mutations are used by the actions when it is called. By doing so, the Vuex State gets updated. Mutations are also very crucial as they are also used to track the State changes.

So, as a developer, you can keep an extra tab on the Mutations to learn how your app data is changing.

To get a better understanding, you can check out the following image

VueJS vs Vuex
Source: VueJS Official Documentation

As you can see the Vuex is responsible for handling the component state through action and mutations. You can connect your Devtools and check on mutations’ value to learn how your app is performing in different scenarios. You also debug using the Mutations via the time-travel debugging method.

The Vue components, on the other hand, speak directly with the Vuex Store and ensure that it dispatches and render the components based on the updated state of the app!

So, the flow of Vuex can be summarized as below:

  • The Vue components dispatch the requirement to the Vuex Store using the Actions.
  • Once there, the Actions commits the status and calls Mutations.
  • The Mutations, on the other hand, acts based on how it is defined. Actions called the Mutations to take actions and change State.
  • The State is then changed and finally, the State value is sent to the Component to render via Getters.

Let’s now learn about Mutations and how they work within Actions.

The Working of Mutations: Business Logic

The mutations can come very handy when defining business logic within your app. So, for example, you can check the conditions and only execute certain aspects of your logic if the condition is met. In case if the first mutation doesn’t take place, the Action will try to do a second mutation. This ability to define multiple mutations lets you define different paths your app can take, giving you the ability to be as flexible as possible. In short, mutations are the place where you define your business logic.

Conclusion: Should You Use Vuex?

Vuex makes your VueJS applications more awesome!

Yes, you can control your application in a better way. With it, you can define Store and then take Actions and Mutations. The components can also work seamlessly to transfer information between each other, compared to the traditional method of component state update.

The state management lifecycle works flawlessly and provides an efficient way to communicate the State across the components. But, using Vuex indeed means adding more boilerplate code. However, the final result justifies that and you will thank yourself later when it comes to making changes to your app.

So, what do you think about the Vuex? Do you think you need it after reading? Comment below and let us know.