Svelte中如何更新store内对象子数组并同步UI？

核心原因 #

Svelte 的 writable store 是靠引用变更触发响应式更新的。直接修改嵌套对象/数组的属性（比如你改 Messages 里的 IsSelected），原数组、对象的引用都没变化，store 检测不到状态变更，自然不会同步到UI。

解决方案：创建新引用触发更新 #

必须通过复制（浅拷贝）修改部分的数组/对象，生成新引用后重新赋值给 store，不用全量复制整个大数组，只针对需要修改的项处理就行。

举个实际例子：
假设你的 store 定义是这样的：

import { writable } from 'svelte/store';

export const itemsStore = writable([
  {
    id: 1,
    Messages: [{ IsSelected: false, text: '消息1' }, { IsSelected: false, text: '消息2' }]
  },
  {
    id: 2,
    Messages: [{ IsSelected: false, text: '消息3' }]
  }
]);

点击「全选」按钮时，用 update 方法修改状态：

// 比如要选中 id=1 的项的所有 Messages
itemsStore.update(currentItems => {
  return currentItems.map(item => {
    if (item.id === 1) {
      // 浅拷贝当前item，再拷贝Messages数组并修改IsSelected
      return {
        ...item,
        Messages: item.Messages.map(msg => ({ ...msg, IsSelected: true }))
      };
    }
    // 其他项直接返回原引用，不用拷贝
    return item;
  });
});

为什么直接修改不行？ #

如果像下面这样直接修改嵌套属性，store 不会触发更新：

// 错误示例：UI不会更新
itemsStore.subscribe(current => {
  const target = current.find(item => item.id === 1);
  target.Messages.forEach(msg => msg.IsSelected = true);
});

因为整个数组、目标对象、Messages数组的引用都没变化，Svelte 无法感知到内部属性的修改。

总结 #

• 必须通过创建新的数组/对象引用触发 store 更新，也就是需要对修改部分做浅拷贝后重新赋值
• 不用全量复制整个数组，只针对要修改的项生成新引用即可，兼顾性能和响应式要求

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