1:states里面初始化任务列表
代码语言:javascript复制 //定义所需要的状态的
state: {
list:[
{
title: "吃饭",
complete: false,
},
{
title: "睡觉",
complete: false,
},
{
title: "打豆豆",
complete: false,
},
]
//name: 'jack'
},
2:mutations中 添加任务 payload表示添加的任务
代码语言:javascript复制addTodo(state,payload){
state.list.push(payload)
},
删除任务 splice(下标,个数) payload表示当前点击的下标
代码语言:javascript复制delTodo(state,payload){
state.list.splice(payload,1)
},
清除已完成 payload表示已经过滤后的数组
代码语言:javascript复制 clear(state,payload){
//把过滤之后的数组传进来
state.list=payload
}
index.js
代码语言:javascript复制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: {
}
})
参考资料
- 参考文档
- 参考视频
- Vue3.0官方文档查看文档