pinia实现todos

最新推荐文章于 2024-04-15 22:11:12 发布

诗霖雪

最新推荐文章于 2024-04-15 22:11:12 发布

阅读量709

点赞数 17

分类专栏： vue练习文章标签： javascript 开发语言 ecmascript 前端

本文链接：https://blog.csdn.net/m0_56713342/article/details/135873220

版权

本文介绍了如何使用Vue框架和Pinia库创建一个简单的待办事项列表应用，包括状态管理、操作处理（如添加、删除和切换完成状态）、以及与用户界面的交互。应用数据存储在localStorage中，支持过滤和清除已完成任务。

摘要由CSDN通过智能技术生成

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