[Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

Posted 2020-09-29 Answer1215

You‘ll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the axios.delete method then filtering out the deleted todo once the response comes back.

 

Add a remove button to the todo list:

<template>
  <div>
    <form @submit.prevent="add(task)">
      <input v-model="task" type="text" />
      <input type="submit" value="ADD">
    </form>
    <article class="pa3 pa5-ns">
      <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
        <li v-for="todo of todos" class="flex items-center ph3 pv3 bb b--light-silver">
          <span class="flex-auto">{{todo.id}} {{todo.task}}</span>
          <button @click="remove(todo)"><img src="https://icon.now.sh/trash" alt="delete"></button>
        </li>
      </ul>
    </article>
  </div>
</template>

<script>
  import { mapState, mapActions } from ‘vuex‘
  import {init} from ‘./shared‘

  export default {
    fetch: init,
    computed: {
      ...mapState({
        todos: (state) => state.todos
      })
    },
    data () {
      return {
        task: ‘Some data‘
      }
    },
    methods: {
      ...mapActions([
        ‘add‘,
        ‘remove‘
      ])
    }
  }
</script>

 

store/index.js:

import Vuex from ‘vuex‘
import axios from ‘axios‘

const store = () => new Vuex.Store({
  state: {
    todos: [
    ]
  },
  mutations: {
    init (state, todos) {
      state.todos = todos
    },
    add (state, todo) {
      state.todos = [
        ...state.todos,
        todo
      ]
    },
    remove (state, todo) {
      state.todos = state.todos.filter((t) => {
        return t.id !== todo.id
      })
    }
  },
  actions: {
    async add (context, task) {
      const commit = context.commit
      const res = await axios.post(‘https://todos-cuvsmolowg.now.sh/todos‘, {
        task,
        complete: false
      })
      commit(‘add‘, res.data)
    },
    async remove ({commit}, todo) {
      await axios.delete(`https://todos-cuvsmolowg.now.sh/todos/${todo.id}`)
      commit(‘remove‘, todo)
    }
  }
})

export default store