本文介绍如何在 Svelte 中安全实现两个 writable store（如 teamDict 和 userDict）之间的双向数据同步，避免订阅循环导致的无限更新，并通过 derived store 作为协调层确保状态一致性与响应式更新。

本文介绍如何在 svelte 中安全实现两个 writable store（如 teamdict 和 userdict）之间的双向数据同步，避免订阅循环导致的无限更新，并通过 derived store 作为协调层确保状态一致性与响应式更新。

在 Svelte 应用中，当需要维护两种不同结构但逻辑关联的数据（例如按团队组织的嵌套结构 vs 扁平化的全局用户映射），并要求二者实时双向同步时，直接在 subscribe 回调中互相修改对方 store 会触发无限递归更新——因为 teamDict.set() 触发 userDict 订阅，而后者又调用 teamDict.set()，形成死循环。

✅ 正确解法是放弃直接双向订阅，转而采用 “单向驱动 + 派生协调” 架构：

1. 保留两个独立的 writable store 作为单一数据源（SSOT）：

   import { writable } from 'svelte/store';
   export const teamDict = writable({});
   export const userDict = writable({});

2. 创建一个只读的 derived store 作为协调视图，它同时监听两者，并在每次任一 store 更新时，原子性地计算出一致的最新快照，再统一派发给 UI：

   import { derived } from 'svelte/store';
   
   export const syncView = derived(
     [teamDict, userDict],
     ([$teamDict, $userDict], set) => {
       // 步骤1：从 teamDict 推导出规范化的 userDict（扁平化）
       const derivedUserDict = Object.values($teamDict).reduce(
         (acc, team) => ({ ...acc, ...team.users }),
         {}
       );
   
       // 步骤2：从 userDict 反向校准 teamDict（确保 team.users 与 userDict 一致）
       const derivedTeamDict = { ...$teamDict };
       for (const [userId, userData] of Object.entries($userDict)) {
         const teamId = userData.team_id;
         if (derivedTeamDict[teamId] && derivedTeamDict[teamId].users) {
           derivedTeamDict[teamId].users[userId] = userData;
         }
       }
   
       // 步骤3：一次性设置协调后的双状态（避免中间态不一致）
       set({ teamDict: derivedTeamDict, userDict: derivedUserDict });
     }
   );

3. 组件中仅订阅 syncView，禁止直接操作 $teamDict 或 $userDict 的响应式值（即不使用 $teamDict[1].users[1] = ... 这类突变）：

   <script>
     import { syncView } from './stores.js';
   </script>
   
   <!-- 安全：通过 store 方法更新 -->
   <button on:click={() => 
     teamDict.update(t => ({
       ...t,
       1: { ...t[1], users: { ...t[1].users, 1: { ...t[1].users[1], name: 'top' } } }
     })}
   >
     更新团队内用户名称
   </button>
   
   <button on:click={() => 
     userDict.update(u => ({
       ...u,
       1: { ...u[1], name: 'bottom' }
     })}
   >
     更新全局用户名称
   </button>
   
   <!-- 响应式渲染来自 syncView 的协调后状态 -->
   <pre class="brush:php;toolbar:false;">{JSON.stringify($syncView, null, 2)}

⚠️ 关键注意事项：

• 永远不要在 subscribe 回调中调用 .set() 或 .update() 修改另一个 store —— 这是循环陷阱根源；
• derived store 的回调函数必须是纯函数：只读取输入、计算新值、调用 set()，不产生副作用；
• 若需支持深层嵌套变更（如 user.name），推荐使用 immer 或手动深克隆（structuredClone）避免引用污染；
• 实际项目中，建议将 teamDict 和 userDict 封装为带 addUser, removeUser, moveUserToTeam 等语义方法的自定义 store，提升可维护性。

通过该模式，你既保留了数据建模的灵活性（团队/用户双视角），又保障了状态同步的安全性与可预测性——这正是 Svelte 响应式哲学中“显式优于隐式”的最佳实践。