用途:按既定模式创建 Zustand store,配合正确的 TypeScript 类型与中间件,适合在前端项目中统一状态管理写法。
主要能力与约定:从 assets/template.ts 复制模板并替换占位符,{{StoreName}} 替换为 PascalCase 仓库名(如 Project),{{description}} 替换为 JSDoc 简要描述。始终使用 subscribeWithSelector 中间件,示例为 import { create } from 'zustand'; import { subscribeWithSelector } from 'zustand/middleware'; export const useMyStore = create()(subscribeWithSelector((set, get) => ({ /* state and actions */ })));。状态与动作分离:分别定义 MyState(如 items、isLoading)与 MyActions(如 addItem、loadItems),再以 MyStore = MyState & MyActions 组合。使用独立选择器,如 const items = useMyStore((state) => state.items);,避免 const { items, isLoading } = useMyStore(); 这类整体订阅导致任意状态变化都重渲染。可在 React 之外订阅:useMyStore.subscribe((state) => state.selectedId, (selectedId) => console.log('Selected:', selectedId));。
集成步骤:在 src/frontend/src/store/ 创建 store;从 src/frontend/src/store/index.ts 导出;在 src/frontend/src/store/*.test.ts 添加测试。
适用场景:需要按统一模式编写 Zustand 状态仓库并保证类型与中间件一致的前端项目。
限制:资料未提供具体依赖版本、安装命令、完整模板内容及更多边界说明。