Svelte父组件优化：实例内部Store关联Props的冗长实现改进咨询

针对你遇到的父组件Props转Store入Context的繁琐问题，有两种简洁的优化思路：

方案一：批量生成独立Store（适合后代需单独修改属性的场景） #

通过封装函数批量处理所有需要传递的Props，避免重复编写writable和响应式同步逻辑：

<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';

  // 定义所有需要传递给后代的Props
  export let data = [];
  export let mode = 'view';
  export let title = '';
  // ...其他需要的Props

  // 批量创建Store并同步Props更新
  const buildContextStores = (propKeys) => {
    const stores = {};
    propKeys.forEach(key => {
      const store = writable($$props[key]);
      $: store.set($$props[key]);
      stores[key] = store;
    });
    return stores;
  };

  // 指定要转为Store的Prop名称列表
  const contextStores = buildContextStores(['data', 'mode', 'title']);

  // 注入Context
  setContext('parent-component', contextStores);
</script>

后代组件使用方式不变，依然通过getContext解构获取独立Store：

const { data, mode } = getContext('parent-component');

优势：新增Prop只需在export和buildContextStores的参数列表中添加，无需重复编写模板代码；后代组件可单独订阅或修改某个属性的Store。

方案二：单一Store封装所有Props（适合后代仅需读取的场景） #

如果后代组件不需要单独修改某个属性，可将所有Props打包到一个Store中，进一步简化代码：

<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';

  export let data = [];
  export let mode = 'view';
  export let title = '';
  // ...其他需要的Props

  // 创建包含所有Props的单一Store
  const parentStore = writable({ data, mode, title });

  // 任意Prop更新时同步到Store
  $: parentStore.set({ data, mode, title });

  // 注入Context
  setContext('parent-component', parentStore);
</script>

后代组件使用时，通过订阅Store解构所需属性：

<script>
  import { getContext } from 'svelte';
  const parentStore = getContext('parent-component');
  
  // 响应式解构所需属性
  $: ({ data, mode } = $parentStore);
</script>

<div>当前模式：{mode}</div>

优势：仅需维护一个Store，代码量最少；适合仅需读取父组件Props的场景。

总结 #

你的原始实现是符合Svelte响应式逻辑的，但通过批量处理或单一Store的方式，可大幅减少重复代码。具体选择哪种方案，取决于后代组件是否需要单独修改父组件传递的属性。

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