代碼世界是現實的鏡像，狀態管理教會我們：真正的控制不在于凝固不變，而在于優雅地引導變化。
這是「從0死磕全棧」系列的第5篇文章，前面我們已經完成了環境搭建、路由配置和基礎功能開發。今天，我們將引入一個輕量級但強大的狀態管理工具 —— Zustand，來實現一個完整的 TodoList 應用。
Zustand 簡介
Zustand 是一個輕量級、靈活的 React 狀態管理庫，以極簡 API 解決復雜狀態共享問題。
- ? 無需
Provider包裹，直接導入使用 - ? 使用
create創建 store，通過useStore隨時隨地訪問狀態 - ? 支持中間件（如持久化、日志）、異步邏輯
- ? 代碼簡潔易維護，是中小型項目的理想選擇
下面我們將用 React + TypeScript + Zustand 實現一個功能完整的 TodoList。
要實現的功能
-
添加待辦事項
- 在輸入框中輸入內容，點擊“添加”按鈕或按 Enter 鍵
- 新事項添加到列表底部
-
標記完成/未完成
- 點擊復選框切換完成狀態
- 已完成事項顯示刪除線樣式
-
刪除事項
- 點擊右側“刪除”按鈕移除該事項
-
統計信息
- 顯示總事項數和已完成事項數
1. 安裝依賴
npm install zustand
2. 創建 Zustand Store
// store/todoStore.ts
import { create } from 'zustand';// 定義 Todo 項的類型
interface Todo {id: number;text: string;completed: boolean;
}// 定義 Store 的類型
interface TodoStore {todos: Todo[];addTodo: (text: string) => void;toggleTodo: (id: number) => void;deleteTodo: (id: number) => void;
}// 創建 Zustand Store
const useTodoStore = create<TodoStore>((set) => ({// 初始狀態：空數組todos: [<
)
