pinia实现todos

store/todos.js

//导入defineStore
import {defineStore} from 'pinia'
const userTodosStore=defineStore('todos',{
state:()=>({
    // list:[
    //     {id:1,name:'吃饭',done:false},
    //     {id:2,name:'睡觉',done:true},
    //     {id:3,name:'打豆豆',done:false}
    // ],
    list:JSON.parse(localStorage.getItem('todos')|| '[]'),
    filters:['全部','未完成','已完成'],
    active:'全部'
}),
actions:{
    //修改状态
    changeDone(id){
        const todo=this.list.find(item=>item.id===id)
        todo.done=!todo.done
    },
    //删除
    delTask(id){
        this.list=this.list.filter(item=>item.id !== id)
    },
    //添加
    addTask(taskname){
        this.list.push({
            id:Date.now(),
            name:taskname,
            done:false
        })
    },
    //全选
    changeAll(e){
        this.list.forEach(item=>item.done=e.target.checked)
    },
    //清除已完成
    clearDone(){
        this.list=this.list.filter(item=>!item.done)
    },
    //点击状态
    changeActive(active){
        this.active=active
    }

},
getters:{

    isAll(){
        return this.list.every(item=>item.done)
    },
    leftCount(){
        return this.list.filter(item=>!item.done).length
    },
    showList(){
        if(this.active==='已完成'){
            return this.list.filter(item=>item.done)
        }else if(this.active==='未完成'){
            return this.list.filter(item=>!item.done)
        }else{
            return this.list
        }
    }
}
    
})
export default userTodosStore

App.vue

TodoMain.vue

ToDoHeader.vue

ToDoFooter.vue