Vuex and Vue — Bread and Butter

Here explains a basic use case where we can Vuex in application

copyright: youtube

Vue is a progressive Javascript framework and Vuex is the state management tool. We can use redux or flux inside Vue, But Vuex is native to the Vue. Here I am demonstrating a sample application which might not be needed with Vuex, but it will show a basic understanding of the Vuex Concepts.

Why Vuex??

A video is enough to understand all the concepts about why we need Vuex. Thanks to Gregg and Adam from Vue Mastery, Provide a visual explanation about the needs of Vue and Vuex.

link

Introduction

The purpose of this blog is to create a single counter app which will display the count of button clicks. I know, there is no need of that with Vuex, but here we are displaying that for information purposes. Will post the link of the GitHub below.

Contents

1. Install Vue
2. Create Vue app using CLI
3. Install Vuex to the app
4. Add Component for Counter
5. Link Vuex to the App
6. Create the state
7. Create the Mutations
8. Create Actions.
9. Create Getters
10. Calling the getters, actions from the component.
11. Wrapping up

1.Install Vue

Node is mandatory when installing Vue from CLI. It has many pros instead of the CDN version.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2. Create Vue app using CLI

It can be done by using the below command,

vue create application-name
ex: vue create vuex-demo

The command will ask for linting, test setup etc, will cover that portions in another blog.

After the creation, need to change the directory and start the dev server by below commands.

cd application-name
npm run serve

Now, the server is running on 8080 port and we have an awesome landing page also.

It shows, which all plugins are installed and which all needs to install.

Still, We are not installed the Vuex, will do now.

3. Install Vuex to the app

We are following this page. install the Vuex by this command

npm install vuex --save

Now, we need to link the Vuex to the Vue Application. This can be done adding the “Import“ to the main.js

Current main.js file

import Vuex from 'vuex'
Vue.use(Vuex)

The final main.js becomes,

4. Add Component for Counter

Vue CLI already created a component for us called “HelloWorld.vue”, but we are not using that. Instead, we create a counter component called Counter.vue

Remove the HelloWorld.vue and it’s dependencies also(remove from App.vue)

1. Create a component called Counter.vue
2. Register that component in App.vue in the components section
3. Call the counter.vue from the template

1. Create a component called Counter.vue

<template>
  <div>
    <h2>Welcome to Counter</h2>
    <button>increment counter</button>
  </div>
</template>
<script>
</script>
<style>
</style>

2. Register that component in App.vue in the components section

For that, need to import and add in the components also.

import Counter from './components/Counter.vue'
export default {
  name: 'app',
  components: {
    Counter
  }
}

3. Call the counter.vue from the template

It is done by adding the “<Counter/>” in the template section.

Now the App.vue becomes like this,

and the UI becomes,

5. Link Vuex to the App

Now, the most important Part is creating the store file,

“There are so many ways to implement this, but I follow with the store folder, inside that out store file ”

I created a store folder inside the src, then created an index.js file inside that.

In that index.js file, need to import the Vue and Vuex.

Then link the store to the main.js file.

Import the store file to the main.js

import { store } from './store'

Add the store to the “app.vue”

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store()

The final code becomes,

check the server back for any errors,

We are good.

6. Create the state

Now, we can create a state called count, which will keep the current state of the counter value. Initially, we are setting it as zero, then by using mutation, will change the state.

export const store = new Vuex.Store({
state: {
    count: 0
  }
})

7. Create the Mutations

All the changes to the state will be through the mutations. This can be implemented using the “mutations” keyword. Point to be noted here is that, mutations can have 2 parameters, one is “state” ie the current state and the payload which is the value that needs to be used to mutate the state. In this context, which will be incrementing the value of the counter.

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

8. Create Actions.

We can implement the mutations through actions., then why need action. Actions are an asynchronous process which in turn will call the mutations. Whereas the mutations are to be synchronous in which can be executed via synchronous. We can call the mutation in setTimeOut() waiting time functionalities. This can be achieved by actions alone.

We can write 2 ways

actions: {
    inrementAction (context, payload) {
      context.commit('incrementCounter', payload)
    }
  }

or

actions: {
    inrementAction ({commit}, payload) {
      commit('incrementCounter', payload)
    }
  }

9. Create Getters

From the above, we understood mutations, actions. Now, the question is how we can display the current state in the template. This can be done by using getters. The getters will have arguments called state.

getters: {
    counter (state) {
      return state.count
    }
  }

10. Calling the getters, actions from the component.

Now, we need to do below things.

1. Increment the counter when clicking on the button.
2. Display the updated counter value in the display

1. Increment the counter when clicking on the button.

To do that, will create a method, which will, in turn, call the action to increment the counter. In the Counter component, will add a method for this,

<button @click="incrementCounter">increment counter</button>

The method in the template section will invoke the method, will in turn call store to update.

methods: {
      incrementCounter () {
        this.$store.dispatch('inrementAction', 1)
      }
    }

Which will incrementAction(), will update the counter

2.Display the updated counter value in the display

Now, we can retrieve the values from the counter and display that values using the computed properties.

computed: {
      counter () {
        return this.$store.getters.counter
      }
    }

Now in the template section, just need to interpolate that value.

{{counter}}

Now, on clicking the increment counter, will update the value.

11. Wrapping up

I know it is only a little bit, will update the advanced Vuex components soon in the next blog. Please install the vue-js-devtools for checking the Vuex state and debugging. below is the GitHub link for this application code base.

If this story helps you to learn anything, please feel free to buy me a coffee

GitHub Link

Please comment or clap if you like this.