Vuex Turning Vue JS Development Buttery Smooth

Vuex is a library/state management pattern for use with Vue JS. It allows us to create a centralized data store which can be accessed by all components in an app. Therefore this store is known as a “single source of truth”.

Managing the state inside your application is referred to state management. An it can also make sure that the UI of your application is always reflecting by the changes of your app.

However Vuex is very similar to Redux which is used by React JS.

This is a basic illustrated functionality of Vuex:

Why use Vuex?

1. Components need to share state in many cases.
2. Vuex provides a single source of truth for data/state
3. No need to pass events up and props down through multiple components
4. Global state is “reactive”

Let’s just go to standard Vue JS application and how we set it without using Vuex:

This is just a simple to-do application. However we have got a root component and we got two different components nested within that which are Dashboard and TODO List. Likewise under those we have other two components. Moreover, if we use TODO items data to its’ child component, we have to use props to send the data. Then in Add TODO if we want to add a new TODO, we have to trigger an event to update the TODO list in its parent component. After that, the TODO List component again triggers an event to update the root component. So, you can see this is a long process to follow. For small project this process will be okay. But, if the application is large enough and we have much more data to handle this process, it will be really hard to follow.

If we use Vuex for the same application, it will look like this:

Here, we have one central store which is storing the TODO items. It can be accessed directly from any component. As a result no need to use any props, it can be accessed using most known as “getters”. Even if we want to change the data, for example add a new TODO in “Add TODO” component we just need a mutation to the data. So by doing this all component will get the updated data automatically. As a result we do not have to use any event to do that. You see, it’s very easy once you understand the functionalities of Vuex.

Terms of Vuex

1. State – data (TODOs, posts, token, etc)
2. Getters – get pieces’ values from state
3. Actions – called from components to commit a mutation
4. Mutations – Mutate the state

Here is a basic code structure of how we can use vuex in a Vue JS app.