如何正确将嵌套Svelte Store的属性传递给子组件

你遇到的核心问题是：Svelte的writable Store仅在状态对象的引用发生变化时才会触发订阅者更新。直接修改嵌套属性（比如子组件里的attributes.a）只是修改了原对象的内部值，Store的根引用没变化，所以其他订阅者（比如父组件的订阅和模板）感知不到变更。

下面是几种合理的解决方案：

方案1：通过Store的update方法做不可变更新 #

不需要在子组件直接操作整个$rootStore，而是在子组件中通过Store的update方法修改状态，确保返回新的状态引用。

修改Child.svelte：

<script>
import { rootStore } from "./store.js";
export let attributes;

const handleInput = (e) => {
  const newValue = Number(e.target.value);
  rootStore.update(state => {
    // 不可变更新：创建新的根对象和test对象，保留其他属性
    return {
      ...state,
      test: {
        ...state.test,
        a: newValue
      }
    };
  });
};
</script>

<input type="number" value={attributes.a} on:input={handleInput}/>

这样每次输入都会触发Store的更新，父组件的模板和订阅者会自动响应变化，不需要手动触发按钮。

方案2：封装自定义Store的修改方法 #

如果嵌套结构复杂，重复写不可变更新代码麻烦，可以在Store中封装专门的修改方法，子组件只需调用方法即可。

修改store.js：

import { writable } from 'svelte/store';

const createRootStore = () => {
  const { subscribe, set, update } = writable({
    test: {
      a: 0
    }
  });

  return {
    subscribe,
    // 封装修改test.a的方法
    updateTestA: (newValue) => {
      update(state => {
        // 不可变更新，保证引用变化
        return { ...state, test: { ...state.test, a: newValue } };
      });
    }
  };
};

export const rootStore = createRootStore();

修改Child.svelte：

<script>
import { rootStore } from "./store.js";
export let attributes;
</script>

<input type="number" value={attributes.a} on:input={(e) => rootStore.updateTestA(Number(e.target.value))}/>

这种方式更清晰，也避免了子组件依赖Store的内部结构。

方案3：直接修改嵌套属性后手动更新Store引用（不推荐） #

如果一定要用bind语法直接修改嵌套属性，可以在修改后手动触发Store的引用更新，但这种方式不够优雅，且可能带来性能问题：

修改Child.svelte：

<script>
import { rootStore } from "./store.js";
export let attributes;

let localValue = attributes.a;
// 当localValue变化时，更新嵌套属性并触发Store更新
$: {
  attributes.a = localValue;
  // 通过浅拷贝创建新引用，触发Store更新
  $rootStore = { ...$rootStore };
}
</script>

<input type="number" bind:value={localValue}/>

这种方式不需要手动按钮，但每次修改都会更新整个Store的引用，适合简单场景。

总结 #

不需要直接操作整个$rootStore，也不需要传递ID（除非是多实例的列表场景）。最优方案是通过Store的update方法做不可变更新，或者封装自定义Store的修改方法，既能保证状态更新被订阅者感知，又能维护代码的可维护性。

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