Vue3.0实现todolist-使用状态管理的api
2023-06-13 09:11:15 时间
1:states里面初始化任务列表
//定义所需要的状态的
state: {
list:[
{
title: "吃饭",
complete: false,
},
{
title: "睡觉",
complete: false,
},
{
title: "打豆豆",
complete: false,
},
]
//name: 'jack'
},
2:mutations中 添加任务 payload表示添加的任务
addTodo(state,payload){
state.list.push(payload)
},
删除任务 splice(下标,个数) payload表示当前点击的下标
delTodo(state,payload){
state.list.splice(payload,1)
},
清除已完成 payload表示已经过滤后的数组
clear(state,payload){
//把过滤之后的数组传进来
state.list=payload
}
index.js
import { createStore } from 'vuex'
export default createStore({
//定义所需要的状态的
state: {
list:[
{
title: "吃饭",
complete: false,
},
{
title: "睡觉",
complete: false,
},
{
title: "打豆豆",
complete: true,
},
]
},
mutations: {
//添加任务
addTodo(state,payload){
state.list.push(payload)
},
//删除任务 splice(下标,个数)
delTodo(state,payload){
state.list.splice(payload,1)
},
//清除已完成
clear(state,payload){
//把过滤之后的数组传进来
state.list=payload
}
},
actions: {
},
//模块化
modules: {
}
})
参考资料
相关文章
- 一次nginx返回422状态码的经历
- Unity 角色控制器重复使用Ragdoll布娃娃系统,动画控制和布娃娃状态切换
- Linux窗口API:开启更灵活的开发革命(linux窗口api)
- MySQL Status Firewall_cached_entries 数据库状态作用意思及如何正确
- 使用MySQL函数API实现数据库操作(mysql函数api)
- MySQL Status Ndb_api_event_data_count_injector 数据库状态作用意思及如何正确
- MySQL Status Ndb_api_pk_op_count_session 数据库状态作用意思及如何正确
- MySQL Status Ndb_api_pk_op_count_slave 数据库状态作用意思及如何正确
- MySQL Status Ndb_api_pruned_scan_count_slave 数据库状态作用意思及如何正确
- MySQL Status Ndb_api_trans_commit_count_session 数据库状态作用意思及如何正确
- MySQL Status Ndb_api_trans_local_read_row_count 数据库状态作用意思及如何正确
- [问题解决]ALV可输入状态下输入金额/数量字段小数位数提前的问题详解编程语言
- 物料主数据的维护状态详解编程语言
- 获取WBS状态函数详解编程语言
- Linux内核API手册:实现技术最新突破(linux内核api手册)
- 了解Linux系统状态:实时监控(linux系统状态监控)
- 妙用Linux把时间调整到完美状态(linux调整时间)
- 状态管理Oracle网络连接状态管理策略(oracle链路)
- 如何查看MySQL表的状态?(mysql表状态)
- 基于API的MySQL数据库连接实现(api连接mysql)
- API技术连接MySQL数据库的最佳方法(api如何连接mysql)
- 深入浅出查看 Redis 链接状态(查看redis 链接)