[Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
2024-08-31 19:07:53
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
最新文章
- SQL Server 2014 新特性——内存数据库
- Android探索之HttpURLConnection网络请求
- hibernate 实现分页查询语句、单条查询语句、多条查询语句、修改、删除语句
- linux怎么运行.SH文件
- crontab 定时任务格式
- C++获取系统的Mac地址
- Python的经典问题——中文乱码
- 安装GlusterFS
- 自动加载U盘
- Java Web入门学习（四）Eclipse与Maven、Tomcat整合配置
- BZOJ 3295: [Cqoi2011]动态逆序对 [CDQ分治]
- VxWorks6.6 pcPentium BSP 使用说明（一）：基本概念
- 版本号对比 -- Python实现
- 将包含经纬度点位信息的Excel表格数据导入到ArcMap中并输出成shapefile
- CF Round #551 (Div. 2) D
- springcould 微服务 搭建
- MySQL data type
- ORACLE设置用户密码不过期
- Keil5创建GPIO
- GitFlow原理浅析