状态管理
State Management
中级通用状态管理（State Management）是组织界面数据如何保存、更新和共享的方式。它解决多个组件显示同一份数据时难以保持一致的问题，比如购物车加了商品，角标和结算页都要跟着变化。
你可能会说：「我改了购物车里的商品后，页面各处的数量和总价能不能一起更新？」
动手看看咖啡店购物车同步
Morrow 咖啡
购物车
2
商品页
埃塞俄比亚手冲咖啡豆花香与柑橘风味 · 250g / 袋
当前已选 2 袋
结算页
埃塞俄比亚手冲咖啡豆
待结算：2 袋
商品页、角标和结算页读取同一份购物车数据
拖动数量，模拟在商品页加购或移除；看看顶部角标和右侧结算数量是否一起变化。
三个位置读取同一份购物车数据。数量更新一次，角标和结算页就会显示相同的结果。
要点界面里的状态怎么管才不乱？
- 1
先分清数据归谁使用
搜索框里还没提交的文字，通常由搜索框自己保存就够了；购物车商品要同时显示在列表、角标和结算页，就需要放在这些界面都能读取的位置。共享范围决定状态放在哪里。
- 2
让更新沿着数据流传递
用户点击“加入购物车”后，我们更新商品列表，依赖这份数据的数量和总价再随之计算。这样各处读的是同一份结果，而不是分别修改角标、结算页和提示文字。
- 3
区分临时值和持久数据
弹窗是否打开通常只影响当前界面；订单是否已支付则要以服务端结果为准。发起请求时，界面还可能需要显示加载或失败状态。分清这些来源，刷新页面和请求失败时才不会误导用户。
容易混淆的地方
状态是某一刻的数据，例如“购物车有三件商品”；状态管理讨论这些数据放哪儿、由谁更新、哪些界面跟着变化。它也不等于浏览器存储：把数据存起来能让刷新后继续读取，但不能自动解决多个组件如何同步更新。服务端数据还要考虑何时重新获取，不能只靠前端保存一份。
什么时候用
适合用
- 做购物网站时，商品列表、顶部购物车角标和结算区都要随加购操作同步变化。
- 做后台筛选页时，筛选条件会同时影响表格、结果数量和分页，需要统一更新。
- 做 AI 聊天工具时，发送中、流式回复、失败重试等信息会影响输入区和消息列表。
不适合用
- 页面只是展示一段固定说明，没有随交互变化的数据，用静态内容就够了。
- 点击导航后只是去另一个网址，不需要为跳转专门维护一份界面状态，直接用链接。
- 只想让刷新后的登录身份保持有效，核心是会话与身份认证，不能靠前端状态管理替代。
练一练选一个答案，看看解释
你做一个商品页：点击加购后，顶部角标和侧边购物车都要更新；刷新后还要看到服务端保存的购物车。你会怎么安排？
让 AI 帮你做复制给 AI Agent 直接用
请为商品页设计状态管理：加购后顶部角标、侧边购物车和总价从同一份数据更新；区分加购请求的加载、成功与失败状态。刷新时从服务端获取购物车，并说明哪些临时状态留在组件内部。