SolidJS store嵌套字段怎样局部更新

我第一次把 SolidJS 的表单状态从几个 signal 合并成一个 store 时，最容易写错的地方不是响应式本身，而是更新路径：为了改一个城市字段，顺手把整个用户对象重新展开；为了勾选一条待办，又复制了整个数组。SolidJS 的 store 已经提供了更细的定位方式，直接沿着对象键和数组索引调用 setStore 就可以。

官方地址：https://docs.solidjs.com/concepts/stores

这篇只讨论嵌套字段的局部更新。结论是：单个字段用路径语法，多个同类元素用索引数组或筛选函数，多个字段需要一起修改时使用 produce。这些写法不会把示例变成真实运行截图，下面的图片都是帮助理解结构的原创说明图。

先把嵌套状态放进 createStore

先准备一个小型资料编辑状态。对象里包含 profile，数组里包含 todos，后面的更新都围绕这两个层级展开。

import { createStore } from "solid-js/store";

// 把页面中经常一起读取的对象和数组集中管理
const [store, setStore] = createStore({
  profile: {
    name: "林默",
    address: { city: "杭州", detail: "西湖区" }
  },
  todos: [
    { id: 1, title: "整理接口文档", done: false },
    { id: 2, title: "补充错误处理", done: true }
  ]
});

读取时仍然使用 store.profile.address.city 或 store.todos[0].done。store 的读取由代理跟踪到属性层级，所以更新时不必为了保持响应式而手动复制整棵对象。

用路径语法定位一个嵌套字段

路径语法就是把每一层键作为参数传给 setter。下面只更新城市字段，profile.name 和 address.detail 不需要重新传入。

// 只改 profile.address.city，路径中的每一段都指向下一层
setStore("profile", "address", "city", "宁波");

// 数组元素也能继续向下定位
setStore("todos", 0, "done", true);

// 函数参数接收旧值，适合做开关切换
setStore("todos", 1, "done", (oldDone) => !oldDone);

这里的重点是“定位”，不是把 setter 当成普通对象赋值。对数组来说，数字参数表示索引；再追加字段名，就能到达数组元素内部的属性。若新值是对象，SolidJS 会对目标对象做浅合并，因此可以写成：

// 对第 0 个待办做浅合并，只覆盖 title
setStore("todos", 0, { title: "整理接口与示例" });

数组批量更新不要手写重复 setter

当需求从“改一条”变成“把指定几条标记完成”时，路径语法还支持索引数组。筛选函数则适合按业务条件选中元素。

// 一次更新指定索引，减少重复调用
setStore("todos", [0, 1], "done", true);

// 只更新标题以“补充”开头的任务
setStore(
  "todos",
  (todo) => todo.title.startsWith("补充"),
  "done",
  false
);

多个目标放在一次 setter 调用里时，SolidJS 会把这次多目标修改作为一组更新处理。对比直接在业务代码里循环调用 setter，代码更能表达“同一批对象使用同一个规则”。如果条件依赖索引范围，还可以使用 { from, to, by } 形式，但要先确认数组长度变化不会让范围失效。

多个字段一起修改时选择 produce

如果一次编辑既要改城市又要改详细地址，连续写两条路径当然可以，但我更倾向用 produce 表达“这是一组相关修改”。它提供一个可修改的草稿，最终交回 store。

import { createStore, produce } from "solid-js/store";

// 在同一个草稿里修改同一对象的多个字段
setStore(
  "profile",
  "address",
  produce((address) => {
    // 中文注释说明两个字段需要保持同一次编辑的一致性
    address.city = "宁波";
    address.detail = "鄞州区";
  })
);

produce 主要面向对象和数组。若状态是 Map 或 Set，不要直接套用这套草稿写法；此时应重新考虑数据结构或使用适合该集合的更新方式。

我最后保留的三个判断

• 只改一项：用 setStore("a", "b", value) 的路径语法，最短也最容易定位。
• 改一批数组元素：用索引数组或筛选函数，把选择规则和更新字段放在一次调用中。
• 同一对象的多个字段需要一起变更：用 produce，但不要把它当作 Map、Set 的通用修改器。

常见问题

为什么直接写 store.profile.address.city 不推荐？store 是只读视图，推荐通过 createStore 返回的 setter 修改状态，读写分离后更容易追踪修改来源。

更新对象时是否必须展开旧对象？不必。路径命中对象时，新对象值会与原对象浅合并；只有深层结构仍需继续写出对应路径。

什么时候不该继续拆路径？当一次交互要同步修改多个相关字段时，继续堆 setter 会让意图分散，此时用 produce 更清楚。