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

標籤：http   less   tps   map   items   ons   als   exp   --   

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

 

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