Persisting Vuejs Applications With Vuex Store

Persisting Vuejs Applications With Vuex Store

Frontend frameworks like vuejs seek to provide the user with a better user experience when dealing with data so the question is how to persist the data in vuejs apps and the answer is with Vuex library.

 

As we know that vuejs framework is a frontend javascript framework and it uses the concept of the virtual Dom to render the page elements so when anything changes in the page it only refresh those parts only without reloading all the page and this will speed up page load time. In order to do this it uses a central store which holds all the data of the application. This store acts as a big array of all application data.

Vuejs provides us with a library called Vuex which will act the Vuejs store and its much like the Redux store in ReactJs.

 

Installation:

Using npm

Using cdn

 

 

Vuex Components:

  • State: This is the initial app state.
  • Mutations: These are actions that will change and modify the state by committing the mutation. to execute mutation use:

  • Getters: These functions allow you computer a derived state based on a store state.
  • Actions: It’s like mutations but actions commit mutations instead of modify the state directly, can also be used with async operations like ajax requests. to execute action use:

 

So a typical Vuex store will have the below components:

In most apps you will need only the state and the mutations but in big and large applications you need also the actions and getters.

 

Let’s see a simple example to describe the process, in this example we will create a simple form then we will attach it’s data with Vuex store as shown below:

Let’s break the app into pieces, first we load the vue and vuex scripts, then we create a new instance of the vuex store so for every element in the form we have a vuex state object and vuex mutation like this:

Then we create a component SimpleForm along with the template and computed properties, the very important part is the computed properties that will achieve the two way model binding with the form element like this:

So when you load the application for the first time it will load the initial state on every form element triggered with get() computed property and when you type into any of the fields it will trigger set() which in turn will update the state by committing it as shown:

After that we submit the form checking for each value if it’s not empty and displayed every element in an alert box.

To view the state in the browser download the extension called vue dev tools available in Chrome and Firefox

vuejs vuex

Share this: