Vue3组合式API实战：待办事项状态管理

Vue3组合式API实战：从零构建待办事项应用的状态管理系统

Vue3的组合式API（Composition API）为状态管理提供了更灵活、更模块化的解决方案。本文将指导如何使用组合式API从零构建一个待办事项应用的状态管理系统，帮助开发者深入理解其核心概念与实战技巧。

1. 项目初始化与基础结构

首先创建一个Vue3项目并设置基础组件结构。使用Vite作为构建工具，可以快速初始化项目：

• 安装Vite：`npm create vite@latest todo-app — –template vue
• 进入项目目录：`cd todo-app
• 安装依赖：`npm install

在`src`目录下创建`components`文件夹，并添加`TodoList.vue`和`TodoItem.vue`组件，同时创建`stores`文件夹用于存放状态管理逻辑。

2. 使用ref和reactive管理状态

在组合式API中，`ref`和`reactive`是响应式数据的核心。在`stores/todoStore.js`中定义状态：

import { ref, reactive } from \'vue\'

export const useTodoStore = () => {
  const todos = ref([])
  const newTodo = ref(\'\')

  const addTodo = () => {
    if (newTodo.value.trim()) {
      todos.value.push({
        id: Date.now(),
        text: newTodo.value,
        completed: false
      })
      newTodo.value = \'\'
    }
  }

  const toggleTodo = (id) => {
    const todo = todos.value.find(t => t.id === id)
    if (todo) {
      todo.completed = !todo.completed
    }
  }

  const deleteTodo = (id) => {
    const index = todos.value.findIndex(t => t.id === id)
    if (index !== -1) {
      todos.value.splice(index, 1)
    }
  }

  return {
    todos,
    newTodo,
    addTodo,
    toggleTodo,
    deleteTodo
  }
}

这里使用`ref`管理数组和字符串，将所有状态和方法封装在一个函数中，便于组件调用。

3. 在组件中使用状态管理

在`TodoList.vue`中导入并使用`useTodoStore`：

<template>
  <div>
    <input v-model=\"newTodo\" @keyup.enter=\"addTodo\" />
    <button @click=\"addTodo\">添加</button>
    <ul>
      <li v-for=\"todo in todos\" :key=\"todo.id\">
        <input type=\"checkbox\" v-model=\"todo.completed\" />
        <span :class=\"{ completed: todo.completed }\">{{ todo.text }}</span>
        <button @click=\"deleteTodo(todo.id)\">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useTodoStore } from \'../stores/todoStore\'

const { todos, newTodo, addTodo, deleteTodo, toggleTodo } = useTodoStore()
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

“语法糖使组件代码更简洁，直接解构`useTodoStore`中的状态和方法即可使用。

4. 持久化与进阶优化

为使待办事项在刷新后不丢失，可以使用`localStorage`进行持久化：

const loadTodos = () => {
  const savedTodos = localStorage.getItem(\'todos\')
  if (savedTodos) {
    todos.value = JSON.parse(savedTodos)
  }
}

const saveTodos = () => {
  localStorage.setItem(\'todos\', JSON.stringify(todos.value))
}

watch(todos, saveTodos, { deep: true })
loadTodos()

通过`watch`监听状态变化，自动保存到`localStorage`，并在初始化时加载已有数据。此外，还可以考虑将状态管理逻辑进一步模块化，例如将过滤功能（如显示全部/已完成/未完成）抽离为独立的组合函数。

总结

通过本实战案例，我们掌握了Vue3组合式API的核心用法：使用`ref`和`reactive`管理响应式状态，通过函数封装逻辑实现状态复用，并结合`watch`实现数据持久化。组合式API的模块化特性让状态管理更加清晰和可维护，适合中小型应用的开发需求。随着对组合式API理解的深入，还可以探索更高级的功能，如自定义组合函数、与Pinia集成等，进一步提升开发效率。