[Nuxt] Update State with Vuex Actions in Nuxt.js

Posted 2020-09-29 Answer1215

You can conditionally add classes to Vue.js templates using v-bind:class. This will help display the status of a todo as you add a Vuex action to patch todos. This lesson walks you through setting up a toggle button that triggers a toggle action to patch todos in Vuex.

 

<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 v-bind:class="{strike: todo.complete}" class="flex-auto">{{todo.id}} {{todo.task}}</span>
          <button @click="toggle(todo)"><img src="https://icon.now.sh/check" alt="toggle"></button>
          <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‘,
        ‘toggle‘
      ])
    }
  }
</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
      })
    },
    toggle (state, todo) {
      state.todos = state.todos.map(t => {
        return t.id === todo.id
            ? todo
            : t
      })
    }
  },
  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)
    },
    async toggle ({commit}, todo) {
      const res = await axios.patch(`https://todos-cuvsmolowg.now.sh/todos/${todo.id}`, {complete: !todo.complete})
      commit(‘toggle‘, res.data)
    }
  }
})

export default store