一、为什么需要 Zustand？

状态管理的痛点

在 React 开发中，我们经常会遇到这样的场景：

// 组件 A
const = useState;按理说，// 组件 B 也需要使用 count
// 组件 C 也需要修改 count

说到传统的方法，

• Props Drilling一层层传递 props，代码冗长难维护
• Context API需要创建 Provider。包裹组件树，样板代码多
• Redux功能比较全面但配置复杂，需要定义 action、reducer 等

Zustand 的优势

Zustand是一个轻量级的状态管理库，它的主要理念是：简单即美。

主要优势：

• 🎯 极简 API只需几行代码就能创建 store
• 📦 零依赖不依赖任何框架，可用于 React、Vue 等
• 🚀 性能优秀基于订阅机制。组件只在自己需要的状态变化时重新渲染
• 🔧 TypeScript 友好完整的类型推断支持
• 💾 内置持久化通过中间件比较容易做到数据持久化

二、Zustand 主要概念

基本结构

Zustand 的主要就是 create 函数，它接收一个函数并返回一个 hook：

import { create } from 'zustand';const useStore = create => ({
// 状态
至于count。0,// 修改状态的方法
increment: => set => ),}));

使用方式

在组件中使用 store：

function Counter {
// 从 store 中获取状态和方法
const { count,increment } = useStore;return (


计数的观点是，{count}
增加

);老实说，}

三、实战项目解析

让我们通过一个完整的 zustand-demo 项目。Zustand 的实际使用。

项目结构

zustand-demo/
├── src/
│ ├── store/
│ │ ├── counter.ts # 计数器 store
│ │ ├── todo.ts # 待办事项 store
│ │ └── user.ts # 使用者状态 store
│ ├── type/
│ │ └── index.ts # TypeScript 类型定义
│ └── App.tsx # 主组件

类型定义

定义数据结构。这是 TypeScript 项目的常用方法：
export interface Todo {
再看id，number;text: string;
completed: boolean;
按理说，}
export interface User {
id的观点是。number，username: string;avatar，: string;}

技术要点：


使用 #interface# 定义对象结构。

#avatar?: string# 表示可选属性。




计数器 Store

This is simplest state‑management example:
import { create } from 'zustand';import { persist } from 'zustand/middleware';interface CounterState {
至于count，number;increment: => void;decrement: => void;reset: => void;
}
const useCounterStore = create(
persist(
=> ({
再看count，0。increment: => set => ),decrement: => set => ),reset: => set,}),{ name: 'counter' }
)
);其实，export default useCounterStore;

Código 解析：



Estructura de la interfaz de estado:
interface CounterState {
count的观点是，number;// 状态
increment: => void;话说回来，// 方法
decrement: => void;reset: => void;}



Método create:


#create# : crea un store tipado.

Puedes usar el hook resultante como #useCounterStore#.




Middelware persist:


Ahorra automáticamente el estado en localStorage.

从#name#来看，la clave bajo la que se guarda.




#set# función:


Cambio directo con #set#.

Cambio basado en el estado actual con #set)#.




待办事项 Store

Muestra una gestión de estado más compleja usando arrays:
import { create } from 'zustand';不过，import type { Todo } from '../type/index';import { persist } from 'zustand/middleware';其实，export interface TodoState {
说到todos。Todo，怎么说呢，addTodo: => void;toggleTodo: => void;removeTodo: => void;}
const useTodoStore = create(
persist(
=> ({
再看todos，addTodo: =>
set => ({
todos的观点是。})),toggleTodo:=>
set=>({
再看todos，state.todos.map(todo=>
todo.id===id?{...todo,completed:!todo.completed}:todo)
})),removeTodo:=>
set=>({
从todos来看。state.todos.filter
}))
}),{ name:'todo'}
));老实说，export default useTodoStore;

Técnicas clave：


Patrón inmutable para arrays .

#get# se puede usar para leer el estado sin disparar renderizado.

ID generado con #Date.now# – simple pero suficiente para demos.


使用者状态 Store

Muestra cómo manejar autenticación y datos del usuario:



import { create } from "zustand";import { persist } from "zustand/middleware";import type { User } from '../type/index';老实说，


interface UserState {
isLogin:boolean;login:=>void;logout:=>void;user :User | null;老实说，}
export const useUserStore = create(
persist(
=>({
isLogin:false。login:=>set,logout:=>set,user:null,}),{name:'user'}
)
);​



说到Diseño，
.

.

#isLogin#: booleano que indica si el usuario está autenticado.
.

从#user#来看。objeto o null cuando no hay sesión activa.
.

Métodos #login#/ #logout# actualizan ambos campos simultáneamente.
​








...


...