UI Development

Insight into Vue state management

Introduction

A Vue app is made up of Vue components. A Vue component allows us to write all HTML, CSS and JS within it. Every Vue component has a data() function that makes component to be reactive. If any property value in the data() function changes, then the component is re-rendered.’

 

In the above example, the names array is stored data() function. Now, if this value has to be accessed from other components, then we will require one to display and another to manipulate values.

Application-level data is required when the names array has to be shared with other components. This brings the requirement of management of application-level data which is known as State Management.

Before we get deep into State management, let’s have a glance over the data sharing strategy between parent and child components using Props and Custom Events.

Props and Custom Events

Vue passes down the data in the form of props from the parent component to the child component.

For this, we just need to bind the corresponding value to the prop attribute where the child is being rendered. The example shows the names array being passed from the parent component to the child component using v-bind.

Now, to communicate from the child component to the parent component we can’t use props as it passes data in a single direction i.e., in a unidirectional format (parent to child to grandchild). Custom events help the child component to send data to the parent component or notify the parent component.

Image ref: https://i.stack.imgur.com/Tj8Rx.png


In this program, the child component, on click of the button, emits a name-added event with name value.

On the parent component side, @name-added is an event listener. After the event is emitted from the child, it pushes the name value from the event to the parent component’s names array.

Now to establish communication among siblings we can’t use custom event listener as they are limited to interface of a particular component. So, this custom event listener needs to be declared on being rendered. In two isolated components, a component doesn’t render within the other. To handle this issue we can either go with a simple Global Store or a flux-like library called Vuex.

Image ref: https://miro.medium.com/max/2000/1*c0v_myc_MbUdc8hFratiQg.png

Simple Global Store

Simple state management can be achieved by creating a store which has data sharing between components. This Store can manage the application’s state and methods which assist in changing the state. For example,

The Store contains the array names within the state, addName is the method which accepts payload and updates the value of state.names. Let’s have one component (DisplayNames) which will display the names array from the store.

Let’s have another component(SubmitName), for adding means to the data array.

The SubmitName component has an addName method which makes a call to store.addName mutation and passes the payload. The store gets the payload and mutates the value of store.names array. Relevant DOM gets updated automatically whenever the names array in the store changes.

The method SubmitName directly act on the store method. So, it is termed as a store action.

The store method directly mutates the store state. So, it is named as store mutation.

Here DisplayName is particularly concerned with getting info from the store. So we’ll say this component is a store getter.

An action first commits to a mutation. The mutation mutates state. View/components get the store data with getters. This is now getting close to the Flux-like architecture of managing state.

Veux

Vuex is a Flux-like, state management library only for Vue. The principal part of Vuex integration is Vuex store. The Vuex store contains 4 objects – state, mutation, action and getters.

Image ref: https://raw.githubusercontent.com/vuejs/vuex/dev/docs/.vuepress/public/vuex.png

State: State is an object containing properties to be shared in the application:

Mutations: It contains the functions which directly mutate the application state. Mutations have access to the state as it is passed in the first argument. The payload can be passed as the second argument.

Actions: They make the calls to mutations. They also make async calls before committing to mutations. Using context object, it gets access to state, to getters and can also perform commit operation.

Getters: They are similar to the computed property in Vue component. They can be used to perform some operation before sending the data to the components.

To access Vuex store, a store object is declared within a Vue instance of an application.

In Vuex store, components often perform two things.:

  1. GET state information through getters.
  2. DISPATCH actions to store.

 

Vuex is an extension of the store method by introducing actions, mutations, and getters. Also, Vuex can integrate with the vue-devtools to help us with time-travel debugging. Example:

Description: Sequence of all state changes in Vue devtools

Description: Time Travel option in Vue devtools

Conclusion

So, a simple store is easy to establish but state and possible state changes aren’t specifically defined. Whereas Vuex provides a great way to manage application-level state and with Vue dev-tools we also have time travel option.

About The Author