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

[Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js的更多相关文章

  1. [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

    The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submi ...

  2. [Nuxt] Load Data from APIs with Nuxt and Vuex

    In a server-rendered application, if you attempt to load data before the page renders and the data f ...

  3. [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js

    Streams give you the power to handle a "pending" state where you've made a request for dat ...

  4. [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 ...

  5. [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

    You add array of todos to the store simply by adding them to the state defined in your store/index.j ...

  6. Nuxt使用Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 基础知识这里不再重述,学习的话请自行到官网 ...

  7. [Vuex] Perform Async Updates using Vuex Actions with TypeScript

    Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous ...

  8. [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js

    You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...

  9. vue.js移动端app实战3:从一个购物车入门vuex

    什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...

随机推荐

  1. sql server 内置MD5加密函数

    http://blog.csdn.net/rookie_liu_ToFly/article/details/53116932 select right(sys.fn_VarBinToHexStr(HA ...

  2. hdp spark beeline

    thriftserver端口号10016 hdp所用端口号由10000改为10016 !connect jdbc:hive2://localhost:10016

  3. centos配置tomcat编辑修改

    https://jingyan.baidu.com/article/6525d4b1382f0aac7d2e9421.html

  4. vmstat---有关进程、虚存、页面交换空间及 CPU信息

    虚拟内存运行原理 在系统中运行的每个进程都需要使用到内存,但不是每个进程都需要每时每刻使用系统分配的内存空间.当系统运行所需内存超过实际的物理内存,内核会释放某些进程所占用但未使用的部分或所有物理内存 ...

  5. 【直接拿来用のandroid公共代码模块解析与分享】の Notification和NotificationManager

    本文源代码托管在https://github.com/ASCE1885/asce-common,欢迎fork Android项目做得多了.会发现原来非常多基础的东西都是能够复用,这个系列介绍一些自己项 ...

  6. 前台技术--div的隐藏与显示

    怎样使用页面元素隐藏或显示. HTML为我们提供了两个变量visibility和display visibility:隐藏要元素可是元素所暂用的空间不予释放.也就是说元素隐藏了,可是页面上会流出一片空 ...

  7. 利用zip格式实现手机客户端二维码扫描分享识别

    场景: 用户A想要将某应用推荐给用户B,用户B扫描用户A的手机app中的二维码进行下载和安装, 并且需要识别用户B是扫描了用户A的二维码,进而给用户A一定的奖励. (例如:健一网app) zip格式: ...

  8. [BZOJ1672][Usaco2005 Dec]Cleaning Shifts 清理牛棚 线段树优化DP

    链接 题意:给你一些区间,每个区间都有一个花费,求覆盖区间 \([S,T]\) 的最小花费 题解 先将区间排序 设 \(f[i]\) 表示决策到第 \(i\) 个区间,覆盖满 \(S\dots R[i ...

  9. php中类文件名的命名的规则是什么

    php中类文件名的命名的规则是什么 一.总结 一句话总结:类库文件(工具类)类文件都是以.class.php为后缀. 1.类的方法和属性的命名规则是怎样的? 都是小驼峰法 方法的命名使用驼峰法,并且首 ...

  10. Linux下读写芯片的I2C寄存器

    要想在Linux下读写芯片的I2C寄存器,一般需要在Linux编写一份该芯片的I2C驱动,关于Linux下如何编写I2C驱动,前一篇文章<手把手教你写Linux I2C设备驱动>已经做了初 ...