## 基本商店从“zustand”导入{创建}；接口 CounterStore { 计数：数量；增量：() => void; 递减：() => void；重置：() => 无效； } const useCounterStore = create((set) => ({ 计数：0，增量： () => set((state) => ({ count: state.count + 1 })), 递减： () => set((state) => ({ count: state.count - 1 })), 重置: () => 设置({ 计数: 0 }), })); // 用法函数计数器() { const { 计数、递增、递减 } = useCounterStore(); 返回（

{计数}

）； } ## 持久化中间件从“zustand”导入{创建}；从“zustand/middleware”导入{ persist }；界面设置存储{ 主题：“光”| “黑暗的”; 语言：字符串； setTheme: (主题:“亮”|“暗”) => void; setLanguage: (语言: 字符串) => void; } const useSettingsStore = create()( 坚持（（设置）=>（{ 主题：“光”，语言：“en”， setTheme: (主题) => set({ 主题 }), setLanguage: (语言) => set({ 语言 }), }), { name: "settings-storage", // 本地存储密钥 } ））； ## 选择器 (Zustand 5) // ✅ 选择特定字段以防止不必要的重新渲染函数用户名() { const name = useUserStore((state) => state.name); 返回{名称}； } // ✅ 对于多个字段，使用useShallow 从“zustand/react/shallow”导入{useShallow}；函数用户信息（）{ const { 姓名，电子邮件 } = useUserStore( useShallow((state) => ({ name: state.name, email: state.email })) ）；返回

{name} - {email}

; } // ❌避免：选择整个存储（导致任何更改重新渲染） const store = useUserStore(); // 任何状态改变时重新渲染 ## 异步操作接口用户存储{ 用户：用户 |无效的; 加载：布尔值；错误：字符串|无效的; fetchUser: (id: string) => Promise; } const useUserStore = create((set) => ({ 用户：空，加载：假，错误：空， fetchUser: 异步 (id) => { set({ 加载: true, 错误: null }); 尝试{ const 响应 =等待 fetch(`/api/users/${id}`); const user =等待response.json(); set({ 用户, 加载: false }); } 捕获（错误）{ set({ 错误: "无法获取用户", 加载: false }); } }, })); ## 切片模式 // 用户切片.ts 接口用户切片{ 用户：用户 |无效的; setUser: (用户: 用户) => void; 清除用户：（）=>无效； } const createUserSlice = (设置): UserSlice => ({ 用户：空， setUser：（用户）=>设置（{用户}），清除用户：（）=>设置（{用户：空}）， }); // cartSlice.ts 接口购物车切片{ 项目：购物车项目[]； addItem: (项目: CartItem) => void; 删除项目：（id：字符串）=>无效； } const createCartSlice = (设置): CartSlice => ({ 项目：[]， addItem: (item) => set((state) => ({ items: [...state.items, item] })), 删除项目：（id）=>设置（（状态）=>（{ items: state.items.filter(i => i.id !== id) }））， }); // 商店.ts 类型 Store = UserSlice & CartSlice; const useStore = create()((...args) => ({ ...createUserSlice(...args), ...createCartSlice(...args), })); ## 沉浸式中间件从“zustand”导入{创建}；从“zustand/middleware/immer”导入{ immer }；接口 TodoStore { 待办事项：待办事项[]； addTodo: (文本: 字符串) => void; 切换Todo：（id：字符串）=>无效； } const useTodoStore = create()( 浸入器（（设置）=>（{ 待办事项：[]， addTodo: (文本) => 设置((状态) => { // 直接用 Immer 进行变异！ state.todos.push({ id: crypto.randomUUID(), text, done: false }); }), 切换Todo：（id）=>设置（（状态）=>{ const todo = state.todos.find(t => t.id === id); if (todo) todo.done = !todo.done; }), }）））； ## 开发工具从“zustand”导入{创建}；从“zustand/middleware”导入{devtools}； const useStore = create()( 开发工具（（设置）=>（{ // 存储定义 }), { name: "MyStore" } // Redux DevTools 中的名称））； ## 外部反应 // 访问外部组件的存储 const { 计数，增量 } = useCounterStore.getState(); 增量（）； // 订阅更改 const 取消订阅 = useCounterStore.subscribe( (state) => console.log("计数已更改：", state.count) ）；

条件5

包含技能