实战篇：（十五）深入使用 Vite + Vue3 + TypeScript 实现 Todo List 状态管理：从组件通信到 Vuex

实战篇：（十五）深入使用 Vite + Vue3 + TypeScript 实现 Todo List 状态管理：从组件通信到 Vuex

引言

在现代前端开发中，随着项目的复杂性逐渐增加，组件间通过 props 和 events 进行通信的方式在大型项目中显得捉襟见肘。Vuex 作为 Vue 的官方状态管理库，能够帮助开发者集中管理应用的全局状态，在多个组件间保持一致性，提升项目的可维护性。

结合 TypeScript，可以为项目中的状态管理提供强大的静态类型检查功能，从而减少错误并提高代码的可读性和可维护性。在这篇文章中，我们将基于 Vite、Vue3 和 TypeScript 实现一个 Todo List 项目，并通过引入 Vuex 实现状态管理的优化。

项目结构

首先，我们回顾一下当前 Todo List 项目的结构，并准备加入 Vuex 来进行状态管理。

├── src
│   ├── components
│   │   ├── TodoItem.vue
│   │   ├── TodoList.vue
│   ├── store
│   │   ├── index.ts
│   ├── App.vue
│   ├── main.ts
├── package.json

在这个项目中，我们新增了 store 目录，用于管理 Vuex 的状态。在后续步骤中，将展示如何使用 Vuex 对 Todo 项目状态进行集中管理。

安装与配置 Vuex

1. 安装 Vuex

首先，我们需要安装 Vuex，在项目根目录下运行以下命令：

npm install vuex@next

2. 创建 Vuex Store

在 src/store/index.ts 中配置 Vuex Store，用来管理项目中的状态。在本例中，TodoItem 包含三个属性：id、text 和 completed，分别代表每个 Todo 项的唯一标识、内容和是否完成。

import {
    createStore } from 'vuex';

interface TodoItem {
   
  id: number; // Todo 项目的唯一标识
  text: string; // Todo 项目的内容
  completed: boolean; // Todo 项目的完成状态
}

interface State {
   
  todos: TodoItem[]; // 管理 Todo 项目列表的状态
}

export const store = createStore<State>({
   
  state: {
   
    todos: [] // 初始状态为空数组
  },
  mutations: {
   
    // 添加新的 Todo 项目到状态
    addTodo (state, todo: TodoItem) {
   
      state.todos.push(todo);
    },
    // 切换 Todo 项目的完成状态
    toggleTodo (state, id: number) {
   
      const todo = state.todos.find(item => item.id