How do we create a simple counter with Vue Js and Vuex?

The answer is simple

A counter is the easiest way to learn how to work with Vuex state management. Now the question is what is Vuex?

A vuex is a state management library used mainly for Vue. But it can be used in React too.

Right now, we are targeting an application that would look something like this:

A simple counter

We need to install vuex in our Vue JS application.

npm i vuex@next

This installs the latest vuex in our application. Now we start building the counter.

At first, we create a file called store.js. In that file we need to import createStore from vuex like this:

import {createStore} from 'vuex';
const store=createStore({
state:{},
getters:{},
actions:{},
mutations:{}
})
export default store

Here, we have created a store called store, which needs to be exported and the store contains four constants, the constant state (i.e. the current state of an object), the constant getters(in order to retrieve the current state), the constant actions (the actions that can be performed to change the current state of the object) and the constant mutations (where the actions perform the changes in the current state of the object). Let’s start by creating a state

import {createStore} from 'vuex';
const store=createStore({
state:{
count:0
},
getters:{},
actions:{},
mutations:{}
})
export default store

Let’s see what this looks like in our App.vue file. We need to create the retrieved state as a computed property in App.vue

<template>
  <div>
    <center>
  <h1>{{count}}</h1>
    </center>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  computed:{
    count(){
      return this.$store.state.count;
    }
  }, 
}
</script>
<style>
</style>

This will display the current state of the count which is 0. Now, let’s make some changes to the count. Let’s perform some actions on the count and call it changeCount. The payload is the number we can pass to the action.

actions:{  
   changeCount({commit},payload){  
   return (commit('changeCount', payload))  
    }
},

Now we have to create a mutation called changeCount, this is where the real action will happen. It means that the payload will be added to the current state of the count, which is 0 right now.

mutations:{  
  changeCount(state,payload){ 
return state.count += payload  
},

It is always wiser to use getters instead of retrieving the data with this.$store.state.count. A getter’s results are cached based on its dependencies and will only re-evaluate based on changes made to the state. So let’s access the state through getters.

<template>
  <div>
    <center>
  <h1>{{count}}</h1>
    </center>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  computed:{
    count(){
      return this.$store.getters.count;
    }
  }, 
}
</script>
<style>
</style>

Now to call the action from App.vue by using dispatch. So we can create a button that starts a method called increment and in that method we can dispatch the action like this.

<template>
<div> 
   <center> 
 <h1>{{count}}</h1>
 <button @click="increment">Increment</button>
 </center> 
 </div>
</template>
<script>
export default { 
  name: 'App', 
  components: {  }, 
  computed:{  
  count(){   
   return this.$store.getters.getCount;    }  }, 
   methods:{  
  increment(){      
  this.$store.dispatch('changeCount',1)    }, 
}   
 </script> 
 <style></style>

We have dispatched the action called changeCount and passed a payload of 1. So now, with the clicking of a button only 1 will be added to the current state of the count. Let’s change that to 2.

methods:{  
  increment(){      
  this.$store.dispatch('changeCount',2)    }, 
}

Now let’s create a reset button. And change the current state of count back to 0. All we need to do is create an action and a mutation and dispatch the action on the clicking of a button called reset. This is very simple to accomplish.

import {createStore} from 'vuex'; 
 const store= createStore({   
   state:{     
      count:0   
    },    
   getters:{    
      getCount(state){      
      return state.count;     
     }    
 },  
 actions:{   
   async changeCount({commit},payload){   
        return Promise.resolve(commit('changeCount', payload))    },    
   async reset({commit}){    
        return Promise.resolve(commit('reset'))   
   }    
},  
  mutations:{    
    changeCount(state,payload){           
     return state.count += payload        },
    reset(state){          
     return state.count = 0;        }     },  
  export default store

As you can see actions are asynchronous but mutations are synchronous. Anyways, all that is left is one button and the button dispatching the reset action.

<template>  
<div>    
<center>  <h1>{{count}}</h1> 
<button @click="increment">Increment</button> 
<button @click="reset">Reset</button>    
</center>  </div>
</template>
 <script>
export default {  
  name: 'App',  
  components: {  },  
  computed:{    
  count(){      
  return this.$store.getters.getCount;    
  } 
 }, 
 methods:{ 
   increment(){    
   this.$store.dispatch('changeCount',1) 
   },    
reset(){     
  this.$store.dispatch('reset')    
} 
 }}
</script> 
<style></style>

This reset button will work perfectly and reset the state of the count back to 0. Altogether, all the codes will work perfectly. The sky will always be clear and the future of coders will be bright everywhere.

Spread the love like a spread operator

…Love

Samanja