SuperAPI AI 工具集

state-management

前端与建站

查看项目

更新于 10-16 11:19

技能介绍

用途:在前后端项目中决定状态放哪、用哪个库,并给出各框架的实现范式。适用客户端状态、服务端 API 数据、跨组件共享、持久化与状态机等场景。

主要能力:状态分类决策(服务端/客户端/表单/URL/派生);各框架方案示例,React 用 Redux Toolkit、Zustand、Jotai、Valtio、TanStack Query,Vue 用 Pinia 与 TanStack Query,Angular 用 NgRx 与 Signals(19+),Svelte 用 Stores 与 Runes;持久化策略涵盖 localStorage、sessionStorage、IndexedDB、URL、cookies;附质量自检与常见坑清单。

核心原则:服务端数据不放 Redux,用 TanStack Query 处理缓存、失效与重试;状态最小化,能派生就不存;状态放在最近共同祖先,不滥用 Context;不可变更新用 Immer 或结构共享。

使用方式:先列状态清单分类,服务端状态配 staleTime、gcTime 与 queryKey,客户端状态按复杂度选 useState/Context、Zustand/Pinia 或 Redux Toolkit,表单用 React Hook Form 或 VeeValidate,URL 状态交给路由,派生状态用 computed。示例中 persist 中间件名称为 'user-storage'。

限制:文中未说明各库版本要求、安装命令、许可与收费信息;Angular Signals 标注 19+,其余兼容性暂未提供;模板文件路径仅为项目内相对路径,需自行在项目根 references 下查看。