Svelte子组件修改writable store后父组件未更新如何解决

1. 子组件B的修改方式错误：直接修改$db嵌套的对象属性属于原地修改，Svelte的writable store只有在调用set()或update()方法时，才会向所有订阅组件发送更新通知，原地修改不会触发这个机制。
2. 父组件A的响应式绑定错误：export let documents = $db[collection].documents;只是在组件初始化时赋值一次，后续db store变化时，documents变量不会自动更新。

步骤1：修复父组件A的响应式绑定 #

将父组件中documents的声明改为响应式语句，确保db store变化时自动更新：

<script>
  import { db } from '$lib/memstore.js'
  // 接收collection作为组件props
  export let collection;
  // 响应式声明：当$db或collection变化时，自动更新documents
  $: documents = $db[collection]?.documents || {};
</script>

{#each Object.entries(documents) as [name, document]}
  <!-- 原UI渲染逻辑 -->
{/each}

<B collection={collection}>Upload Button</B>

步骤2：修改子组件B的更新逻辑 #

使用store.update()方法以不可变方式更新store，确保触发订阅通知：

import { db } from './memstore';
// 接收父组件传入的collection
export let collection;

async function uploadFiles() {
    // ...此处省略获取id和text的业务逻辑
    db.update(currentDb => {
        // 逐层创建新对象，避免原地修改原store数据
        return {
            ...currentDb,
            [collection]: {
                ...currentDb[collection],
                documents: {
                    ...currentDb[collection].documents,
                    [id]: {
                        text: text,
                        size: text.length
                    }
                }
            }
        };
    });
}

可选优化：简化嵌套更新 #

如果数据嵌套层级较深，手动展开对象过于繁琐，可使用structuredClone做深拷贝后修改，再通过set()更新，但推荐优先使用update()的不可变写法，更符合Svelte的响应式设计：

async function uploadFiles() {
    // ...获取id和text的逻辑
    const updatedDb = structuredClone($db);
    updatedDb[collection].documents[id] = { text, size: text.length };
    db.set(updatedDb);
}

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