多组件共享状态互相覆盖

先理解原理和示例,再练习完整口述与追问。

独立与共享显式定义;按业务 key 分区。

共享状态出现覆盖,常见原因是多个页面写同一槽位,却没有标识数据所属用户、实体或查询条件。先定义谁拥有事实来源、谁只能派生读取,再把独立结果按业务键存储,并规定刷新、失效和清理规则。

商品 A 与 B 的详情请求都写 store.detail,会让后返回的 A 覆盖当前 B;可以按 detailById[id] 存储,或只允许当前请求版本写入当前页。切换账号清理对应缓存。两个组件编辑同一记录时,要定义提交冲突与服务端版本校验,不能靠最后一次前端赋值假装解决并发。

store 不是竞态消除器。对象被共享后直接修改嵌套引用,也可能绕过原本约定的状态转换入口。

先判断这份状态本来就该共享还是每个实例独立。Vue 的 composable、React 的自定义 Hook 通常每次调用各自独立;要共享则明确放 store/Context 或外部服务。共享请求结果按用户、业务 ID 和条件建立合理键,处理竞争;不能只有一份全局 detail 让不同弹窗轮流覆盖。SSR 用户状态每请求隔离。