📅 我们继续 50 个小项目挑战！—— TodoList组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

---

使用 Vue 3 的组合式 API (<script setup>) 和一些基础的 Tailwind CSS 来创建一个功能齐全的待办事项（To-Do）应用。这个应用包括添加新任务、标记任务为完成状态以及删除任务的功能，并且所有的数据都会被保存到用户的 localStorage 中，以便在页面刷新后仍然保留。

---

🎯 应用目标

我们的目标是创建一个轻量级但功能完整的待办事项管理器，用户可以：

• 添加新的待办事项
• 标记待办事项为完成或未完成
• 右键点击待办事项以删除它
• 确保数据在页面刷新后依然存在

---

🔧 技术实现点

💻关键技术与概念

技术/概念	描述
<script setup>	Vue 3 提供的一种更简洁的语法糖来编写组件逻辑
ref	用于定义响应式变量
watch	监听响应式数据的变化并执行相应的回调函数
onMounted	生命周期钩子，在组件挂载完成后调用
localStorage	浏览器提供的持久化存储API，用于保存数据即使浏览器关闭后依旧可用
Tailwind CSS	一种实用优先的CSS框架，通过类名快速构建UI

主要功能

1. 数据持久化：通过 localStorage 实现待办事项的持久化存储。
2. 响应式数据处理：利用 Vue 3 的 ref 实现对数据的响应式管理。
3. 交互设计：
   • 左键点击某项待办事项可切换其完成状态。
   • 右键点击某项待办事项可将其删除。
4. 样式设计：使用 Tailwind CSS 快速搭建美观且响应式的界面。

---

🖌️ 组件实现

💻 模板结构 <template>

<template>
    <div class="font-poppins flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4 text-gray-800">
        <h1 class="mb-6 text-center text-[clamp(5rem,15vw,10rem)] font-light text-purple-400 opacity-40">todos</h1>

        <form @submit.prevent="addTodo" class="w-full max-w-md shadow-lg">
            <input v-model="newTodoText" type="text" placeholder="Enter your todo" autocomplete="off" class="w-full border-none p-4 text-2xl focus:ring-2 focus:ring-purple-400 focus:outline-none" />

            <ul class="divide-y divide-gray-100 bg-white">
                <li v-for="(todo, index) in todos" :key="index" @click="toggleTodo(index)" @contextmenu.prevent="deleteTodo(index)" class="cursor-pointer p-4 text-xl transition-colors hover:bg-gray-50" :class="{ 'text-gray-400 line-through': todo.completed }">{{ todo.text }}</li>
            </ul>
        </form>

        <small class="mt-8 text-center text-gray-500">Left click to toggle completed.<br />Right click to delete todo</small>
    </div>
</template>

💡 解析

• 标题部分: 利用 clamp() 函数确保标题大小根据屏幕宽度自适应调整，同时给用户提供视觉上的吸引力。
• 表单输入: 输入框绑定 v-model 到 newTodoText，允许用户输入新的待办事项。通过 @submit.prevent 阻止默认提交行为并触发 addTodo 方法。
• 列表展示: 使用 v-for 渲染每个待办事项，提供点击事件来切换完成状态和右键菜单来删除项目。对于已完成的任务，通过条件类改变文本颜色和添加删除线。
• 提示信息: 小字提示告知用户交互方式。

💻 脚本逻辑 <script setup>

<script setup>
import { ref, watch, onMounted } from 'vue'

// 响应式数据
const newTodoText = ref('')
const todos = ref([])

// 从localStorage加载待办事项
onMounted(() => {
    const savedTodos = localStorage.getItem('todos')
    if (savedTodos) {
        todos.value = JSON.parse(savedTodos)
    }
})

// 添加待办事项
const addTodo = () => {
    if (newTodoText.value.trim()) {
        todos.value.push({
            text: newTodoText.value.trim(),
            completed: false,
        })
        newTodoText.value = ''
    }
}

// 切换待办事项完成状态
const toggleTodo = (index) => {
    todos.value[index].completed = !todos.value[index].completed
}

// 删除待办事项
const deleteTodo = (index) => {
    todos.value.splice(index, 1)
}

// 监听todos变化，保存到localStorage
watch(todos, (newTodos) => {
    localStorage.setItem('todos', JSON.stringify(newTodos))
}, { deep: true })
</script>

💡 解析

• 初始化数据: 使用 ref 定义 newTodoText 和 todos，分别代表新输入的待办事项文本和当前所有待办事项列表。
• 加载已有数据: 在组件挂载时，尝试从 localStorage 加载之前保存的待办事项。
• 操作方法:
  • addTodo: 当用户提交新待办事项时，检查非空后添加至列表，并清空输入框。
  • toggleTodo: 切换指定索引处待办事项的完成状态。
  • deleteTodo: 从列表中移除指定索引处的待办事项。
• 监听数据变更: 使用 watch 监听 todos 的任何更改，并将更新后的数据同步回 localStorage，保证数据持久性。

---

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{
        id: 49,
        title: 'TodoList',
        image: 'https://50projects50days.com/img/projects-img/49-todo-list.png',
        link: 'TodoList',
    },

router/index.js 中添加路由选项：

{
        path: '/TodoList',
        name: 'TodoList',
        component: () => import('@/projects/TodoList.vue'),
    },

---

🏁 总结

实现了一个基本的待办事项应用，但你仍有许多优化空间：

1. ✅ 提高用户体验：例如，可以增加动画效果来提升交互体验，或者引入拖拽排序功能让用户能够更灵活地管理他们的待办事项。
2. ✅ 增强数据安全性：考虑到 localStorage 存储的数据容易被清除或篡改，考虑采用更安全的数据存储方案如 IndexedDB 或者结合后端服务进行数据管理。
3. ✅ 支持更多功能：比如设置待办事项的截止日期、分类标签等高级特性，使应用更加实用。

总之，这是一个非常基础但全面的示例，展示了如何希望这能激发你进一步探索 Vue.js 的强大功能，并开发出更多令人兴奋的应用程序！

---

👉 下一篇，我们将完成InsectCatchGame组件，一个很恶心的昆虫捕捉游戏。🚀

感谢阅读，欢迎点赞、收藏和分享 😊