zoukankan      html  css  js  c++  java
  • [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

    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
  • 相关阅读:
    Javascript自动垃圾收集机制
    Javascript深入浅出(二)
    Javascript深入浅出(一)
    递归&循环&迭代&遍历&枚举,知多少
    事件流、事件处理程序和事件对象
    弹性布局学习笔记
    css3 伪元素
    css3伪类选择器nth-of-type,:nth-last-of-type,:first-of-type,:last-of-type,:only-of-type
    css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child
    css3状态伪类选择器:checked修改按钮默认样式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7236480.html
Copyright © 2011-2022 走看看