SuperAPI AI 工具集

frontend-angular-store

前端与建站

查看项目

更新于 10-15 21:35

技能介绍

用途:当需要使用 PlatformVmStore 为列表、CRUD、复杂状态或共享/缓存数据实现 Angular 状态管理时使用。

决策依据:组件级 CRUD 列表用 @Injectable() 加 providers: [Store];组件间共享状态用 @Injectable({ providedIn: 'root' });带依赖查询的表单用 @Injectable() 配 forkJoin 并行加载;缓存查询数据用 @Injectable({ providedIn: 'root' }) 加 enableCaching;简单组件无需 store,改用 AppBaseVmComponent。

工作流:搜索已有 store(grep "{Feature}Store" --include="*.ts");阅读设计系统文档;定义包含必需属性的状态接口;用 vmConstructor 提供默认状态;通过 select() 添加选择器、effectSimple() 添加副作用、updateState() 添加更新器;组件继承 AppBaseVmStoreComponent 并提供 store;最后核对检查清单。

关键规则:副作用使用 effectSimple(fn, 'requestKey'),第二参数自动追踪加载状态;状态更新必须不可变,如 updateState(state => ({ items: [...state.items, newItem] }));选择器经 select() 记忆化并返回 Signal<T>;副作用内部使用 tapResponse(success, error);组件级在 @Component 中写 providers: [Store],单例缓存用 @Injectable({ providedIn: 'root' }) 加 enableCaching。

文件位置:src/Frontend/apps/{app-name}/src/app/features/{feature}/,内含 {feature}.store.ts 与 {feature}.component.ts。

实现前必读:.claude/skills/shared/angular-design-system.md、.claude/skills/shared/bem-component-examples.md、.claude/skills/frontend-angular-store/references/store-patterns.md,以及目标应用 docs/design-system/06-state-management.md。

反模式:直接 api.subscribe() 而不用 effectSimple,导致无加载状态追踪;直接修改状态;组件装饰器缺少 providers: [Store];在 effectSimple 内使用 observerLoadingErrorState;store 作用域选择错误。

验证清单与任务规划要求:状态接口完整、默认状态、effectSimple 与 request key、tapResponse、select 记忆化、不可变更新、正确提供层级、按需配置 enableCaching 与 cachedStateKeyName;规划时拆分多个小任务,并在最后添加复查任务。资料未提供具体命令、收费或平台信息。