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

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