从React+Redux转Svelte：嵌套对象路由页面绑定问题

刚从React(+Redux)转到Svelte，核心困扰是深层嵌套对象的绑定。我们有树形嵌套的文件夹/文件数据结构，已经理解无路由单页面上Folder和File组件的绑定方式，但现在要给每个文件夹做专属页面，通过唯一的name属性（作为id）访问，比如：

• .../folder/Important%20work%20stuff
• .../folder/Goats

尝试的解决方案及问题 #

1. 页面内响应式声明绑定无效 #

在页面组件中通过响应式声明查找目标文件夹，但输入绑定无法同步变更回Store：

// ./src/folders/[id]/+page.svelte
<script lang="ts">
      const urlParams = new URLSearchParams(window.location.search);
      const id = urlParams.get("id");
      import { root } from './stores.js'
      $: thisFolder = $root.find((f) => f.name === id) // 根层级查找
          ?? $root.map((pf) => pf.files?.find((f) => f.name === id)).find((f) => f) // 二级层级查找，可扩展
      if (!thisFolder) {
          error(404, { message: "folder not found", });
      }
  </script>

  <div>
      <span>Folder name: </span>
      <input bind:value={thisFolder.name}/> <!-- 绑定无效 -->
  </div>

问题：thisFolder是响应式计算变量，能响应Store变化，但无法将输入的变更同步回原Store对象。

2. 派生Store无法绑定且传参困难 #

尝试创建派生Store根据id获取对应文件夹，但派生Store本身不可绑定，且不知道如何动态传入id参数。

3. 监听输入变更（非绑定方式） #

可以通过on:change事件监听输入变化并手动更新对象，但希望仅通过Svelte的绑定语法实现，这种方式太像React的写法，不够贴合Svelte的“响应式”特性。

4. 简化结构按需加载 #

每次路由跳转仅加载对应id的文件夹，但这种方式同样类似React的做法，不符合当前应用的需求。

更新记录 #

1. 补充了相关REPL示例，初步推测第一种思路的方向可能正确，后续将验证并更新问题。
2. 尝试了@hackape的方案，代码可运行但不符合预期：修改一个组件的值后，其他组件需要再次修改才会重新渲染，JSON展示完全不更新，怀疑是id在derived外部传入导致的问题，目前仍在排查中。

内容的提问来源于stack exchange，提问作者bankangle