[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-06021751-1faa-42e3-916e-d3efbd0f46da":3,"$fiTOlVns7UxeGNOva2ir4eyvVsfkSO4J6pabr4AC66FI":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"06021751-1faa-42e3-916e-d3efbd0f46da","zustand-store-ts","创建遵循既定模式的Zustand存储，并使用适当的TypeScript类型和中继件。","cat_life_career","mod_other","sickn33,other","---\nname: zustand-store-ts\ndescription: \"Create Zustand stores following established patterns with proper TypeScript types and middleware.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Zustand Store\n\nCreate Zustand stores following established patterns with proper TypeScript types and middleware.\n\n## Quick Start\n\nCopy the template from assets\u002Ftemplate.ts and replace placeholders:\n- `{{StoreName}}` → PascalCase store name (e.g., `Project`)\n- `{{description}}` → Brief description for JSDoc\n\n## Always Use subscribeWithSelector\n\n```typescript\nimport { create } from 'zustand';\nimport { subscribeWithSelector } from 'zustand\u002Fmiddleware';\n\nexport const useMyStore = create\u003CMyStore>()(\n  subscribeWithSelector((set, get) => ({\n    \u002F\u002F state and actions\n  }))\n);\n```\n\n## Separate State and Actions\n\n```typescript\nexport interface MyState {\n  items: Item[];\n  isLoading: boolean;\n}\n\nexport interface MyActions {\n  addItem: (item: Item) => void;\n  loadItems: () => Promise\u003Cvoid>;\n}\n\nexport type MyStore = MyState & MyActions;\n```\n\n## Use Individual Selectors\n\n```typescript\n\u002F\u002F Good - only re-renders when `items` changes\nconst items = useMyStore((state) => state.items);\n\n\u002F\u002F Avoid - re-renders on any state change\nconst { items, isLoading } = useMyStore();\n```\n\n## Subscribe Outside React\n\n```typescript\nuseMyStore.subscribe(\n  (state) => state.selectedId,\n  (selectedId) => console.log('Selected:', selectedId)\n);\n```\n\n## Integration Steps\n\n1. Create store in `src\u002Ffrontend\u002Fsrc\u002Fstore\u002F`\n2. Export from `src\u002Ffrontend\u002Fsrc\u002Fstore\u002Findex.ts`\n3. Add tests in `src\u002Ffrontend\u002Fsrc\u002Fstore\u002F*.test.ts`\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,146,1488,"2026-05-16 13:48:32",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"cbf4f166-4fd1-4339-988c-0e7ba89b84e2","1.0.0","zustand-store-ts.zip",1086,"uploads\u002Fskills\u002F06021751-1faa-42e3-916e-d3efbd0f46da\u002Fzustand-store-ts.zip","62f2a08ff3ff06da674e7eaf10f8ef054a19eb99a36e81e1fbbeec15aae0d176","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":2027}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]