Basic Introduction to Vuex

Vuex is the state management tool used in Vuejs. If you have worked in Reactjs or Angular you might have heard or know about Redux or NgRx state management tools, this fulfil the same purpose. When we create a vue app some of our components might need the same data. If we did not use vuex we need to pass down that data from component to component. This method is reliable if your app is not very large. If the app is large and need to handle so many data, passing the data from component to component might not be a good idea.

Nested Components (figure 01)

If we look at the figure 01 we can see that, we can only pass the data from component to component is only in the vertical direction, we can not share the data from horizontal direction. In order to overcome this problem we use vuex. Vuex acts as a centralised store where we can manage our state inside any component.

Vuex (figure 02)

There are basically 6 terms that you need to be familiar with,

• State : This is the data we use in our application
• getters : This uses to get the data from the store to the component
• actions: This uses to make Ajax requests to an API
• mutations: This uses to change the state of the application
• commit: Calls a mutation to change the state
• Dispatch: Calls a action to make an Ajax request

When using an action it is required to use either commit or a dispatch as an argument. Forgetting this have given me so many pain when debugging.

Let’s create a TODO project with vue ui cli

$ vue ui

This will open your browser and it will prompt to create a project. After creating the project you need to add the vuex plugin to your application. In order to send Ajax request to an API we need to install axios as a dependency.

Vue ui(figure 03)

After Adding the vuex, open the project with an IDE.

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters:{
  },
  actions: {
  },
  mutations: {
  },
})

This is the basic vuex store layout. Now we need to bring axios to index.js page.

import axios from "axios";

We can configure axios to use our API url as default.

src/main.js

import axios from "axios";

axios.defaults.baseURL = "API_URL";

src/store/index.js

Now lets add todos to our state

state:{
  todos: []
},
getters: {
  getAllTodos: (state) => state.todos
},
actions: {
  async fetchTodos({ commit }){
    try {
        const response = await axios.get("todos")
        commit("setTodos", response.data);
        return response.status
    }catch (error){
      console.log(error)
      return error.response
    }
   }
},
mutations:{
   setTodos: (state, todos) => (state.todos = todos)
}

In actions we fetch the todos then we commit those todos to setTodos mutation. Then the todos are available in our state, So we can use our getters to get that state from our components.

src/components/todos.vue

<script>
 import { mapActions, mapGetters } from "vuex";
 export default {
   methods: {
     ...mapActions(["fetchTodos"]),
   },
   computed: {
     ...mapGetters(["getAllTodos"]),
   },
   async mounted(){
     await this.fetchTodos() 
   }
}

When the component is mounted it will fetch the todos and then with the help of the getters we can use these data in our component. Inside the template tags we can render this data

src/components/todos.vue

<template>
 <div class="container">
   {{ getAllTodos }}
 </div>
<template/>

These are the basics you need to know when starting with Vuex.