[Vuex] Perform Async Updates using Vuex Actions with TypeScript

Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous operation, they become useless.

Actions are a higher layer on the Vuex pattern, which allow to call mutations asynchronously or even call multiple mutations. This lesson guides you through using Vuex actions and type-safe them with TypeScript.

 

We want to add a todo by calling a API to get a todo from a server, then add into our todo app.

The idea is using 'Actions' to make Async request, then calling 'Mutations' with response data.

import {GetterTree, MutationTree} from 'vuex';
import {State} from '../types';
import {Todo} from '../types';

const state: State = {
    todos: [
        {text: 'Buy milk', checked: false},
        {text: 'Learning', checked: true},
        {text: 'Algorithom', checked: false},
    ],
};

export const getters: GetterTree<State, any> = {
    todos: state => state.todos.filter(t => !t.checked),
    dones: state => state.todos.filter(t => t.checked)
};

export const mutations: MutationTree<State> = {
    addTodo(state, newTodo) {
        const copy = {
            ...newTodo
        };
        state.todos.push(copy);
    }
};

export const actions: ActionTree<tate, any> = {
    addTodoAsync(context, id) {
        fetch('https://jsonplaceholder.typicode.com/posts/'+id)
            .then(data => data.json())
            .then(item => {
                const todo: Todo = {
                    checked: false,
                    text: item.title
                }

                context.commit('addTodo', todo);
            })
    }
}

export default state;

 

Add into root Store:

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

import todos, {getters, mutations, actions} from './todos';

Vue.use(Vuex);

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

 

Using '@Action' inside component:

<template>
<section>
    <h4>Todos</h4>
    <ul>
      <li v-for="todo in todos">{{ todo.text }}</li>
    </ul>
    <h4>Done</h4>
    <ul>
      <li v-for="todo in dones">{{ todo.text }}</li>
    </ul>
    <p>
      <label for="">
        Add todo:
        <input type="text" v-model="newTodo.text" @keyup.enter="addTodo(newTodo)">
      </label>
      <label for="">
        Add todo async:
<input type="text" v-model="id" @keyup.enter="addTodoAsync(id)">
      </label>

    </p>
</section>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {Action, State, Getter, Mutation} from 'vuex-class';
import {Todo} from '../types';

@Component({
})
export default class Todos extends Vue {
    @Getter todos: Todo[];
    @Getter dones: Todo[];

    @Mutation addTodo;
    @Action addTodoAsync;

    newTodo: Todo = {
      text: '',
      checked: false
    }

    id: string = '1';
}
</script>