Vue3组合式API+TypeScript重构TodoList应用实战

Vue3组合式API+TypeScript重构TodoList应用实战

Vue3的组合式API（Composition API）与TypeScript的结合为前端开发带来了更强大的类型安全性和代码组织能力。本文将通过TodoList应用的实例，深入探讨如何利用Vue3的组合式API和TypeScript进行高效开发。

1. 项目初始化与基础配置

首先，使用Vite创建Vue3项目并配置TypeScript：

npm create vite@latest vue3-todo -- --template vue-ts

在项目中，需要安装必要的依赖：

• Vue3核心库
• TypeScript类型定义
• Vue Router（用于路由管理）
• Pinia（状态管理）

配置TypeScript时，确保tsconfig.json中启用严格模式（\”strict\”: true），以获得完整的类型检查。

2. 组合式API的核心优势

组合式API将相关功能逻辑组织在一起，解决了Options API中逻辑分散的问题。在TodoList应用中，主要功能包括：

• 任务列表管理
• 添加/删除任务
• 任务状态切换
• 本地持久化存储

使用setup函数，可以将这些逻辑封装在独立的组合函数中，例如：

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

export function useTodos() {
  const todos = ref<Array>([])
  
  const addTodo = (text: string) => {
    todos.value.push({
      id: Date.now(),
      text,
      completed: false
    })
  }
  
  const removeTodo = (id: number) => {
    const index = todos.value.findIndex(todo => todo.id === id)
    if (index !== -1) {
      todos.value.splice(index, 1)
    }
  }
  
  const toggleTodo = (id: number) => {
    const todo = todos.value.find(todo => todo.id === id)
    if (todo) {
      todo.completed = !todo.completed
    }
  }
  
  return { todos, addTodo, removeTodo, toggleTodo }
}

3. TypeScript的类型增强

TypeScript为TodoList应用提供了严格的类型约束。定义Todo类型：

type Todo = {
  id: number
  text: string
  completed: boolean
}

在组合函数中使用该类型，确保数据结构的完整性。例如，在useTodos函数中，todos的ref被明确标注为Todo[]类型，避免了运行时类型错误。

对于组件props，可以使用接口定义明确的类型：

interface TodoItemProps {
  todo: Todo
  onRemove: (id: number) => void
  onToggle: (id: number) => void
}

4. 本地存储与响应式数据

利用Vue3的watchEffect实现数据的本地持久化：

import { watchEffect } from \'vue\'

export function useTodosStorage() {
  const storage = localStorage.getItem(\'todos\')
  const todos = ref(storage ? JSON.parse(storage) : [])
  
  watchEffect(() => {
    localStorage.setItem(\'todos\', JSON.stringify(todos.value))
  })
  
  return todos
}

5. 组件设计与复用

组合式API使得组件逻辑高度可复用。例如，可以将过滤逻辑提取为独立的组合函数：

export function useFilteredTodos(todos: Ref) {
  const filter = ref(\'all\')
  
  const filteredTodos = computed(() => {
    switch (filter.value) {
      case \'active\':
        return todos.value.filter(todo => !todo.completed)
      case \'completed\':
        return todos.value.filter(todo => todo.completed)
      default:
        return todos.value
    }
  })
  
  return { filter, filteredTodos }
}

总结

通过Vue3组合式API和TypeScript重构TodoList应用，实现了代码的高度组织化、类型安全性和逻辑复用。组合式API将相关功能封装在独立的函数中，提高了代码的可维护性；TypeScript则通过严格的类型检查，减少了潜在的错误。这种开发模式不仅适用于小型项目，更能应对复杂应用的需求，是现代前端开发的重要实践。