Svelte多应用实例Store状态隔离方案（无需Redux）

注：本文为自问自答内容。

默认情况下Svelte提供三种核心组件间数据传递方式，各自都有明确的适用边界和缺陷：

• Props（属性传值）：仅支持父组件向直接子组件单向传递数据，无法跨层级传值，深层组件需要数据时必须层层透传，冗余代码多、维护成本高。
• Context（上下文传值）：支持父组件向任意层级的深层子组件单向传值，但无法突破当前父子组件树的层级范围传递数据，且必须在父组件初始化阶段完成配置，组件运行后无法动态更新传入的值，灵活性不足。
• Svelte Store（状态存储）：支持在任意文件、组件中完成数据的设置、更新与订阅操作，但默认是全局单例模式，存在明确的多实例状态冲突问题：当同一页面同时运行多个应用实例时，Store只会存储单个实例的值，调用storeVar.set()会按照页面加载顺序存储对应实例的值，调用storeVar.update()会存储最后触发更新的实例的值，实例间数据会互相覆盖。

需要搭建Svelte应用满足以下要求：

• 从根index文件识别页面上的多个自定义嵌入代码，并行运行多个独立的App实例
• 嵌入代码携带视频尺寸、宽高比等附加配置数据，作为Props传入对应App组件，各实例根据传入的属性渲染对应UI
• 用户在某个实例的UI上触发调整屏幕尺寸等操作时，仅更新当前操作实例的App属性值，不对其他实例产生任何影响
  核心要解决的问题是：不引入Redux等第三方状态管理库的前提下，同时规避Context方案的层级限制、必须初始化配置无法动态更新的缺陷，以及Store方案全局单例导致的多实例状态互相覆盖问题，最终实现多应用实例的独立状态管理。

核心思路是把全局单例Store改造为「每个App实例初始化时独立创建的私有Store」，再通过Context将当前实例的私有Store绑定到对应组件树，既保留Store支持跨任意组件调用、响应式动态更新的能力，又通过Context的组件树隔离性实现不同实例的状态完全独立，具体实现如下：

• 第一步：封装Store工厂函数，替代直接导出的单例Store
  不要在Store定义文件中直接导出创建完成的单例状态对象，而是导出一个工厂函数，每次调用时返回一套全新的、和其他实例完全隔离的Store对象，参考代码：

// store.js
import { writable } from 'svelte/store';

export function createAppStore(initConfig = {}) {
  // 用嵌入代码传入的配置作为状态初始值
  const state = writable({
    videoWidth: initConfig.videoWidth || 0,
    videoHeight: initConfig.videoHeight || 0,
    aspectRatio: initConfig.aspectRatio || '16:9'
  });

  return {
    subscribe: state.subscribe,
    setVideoSize: (width, height) => {
      state.update(cur => ({...cur, videoWidth: width, videoHeight: height}))
    }
    // 可根据业务需求扩展其他状态更新方法
  }
}

• 第二步：App根组件初始化时创建私有Store并注入Context
  每个App实例挂载时，先接收嵌入代码传入的配置Props，调用工厂函数生成当前实例专属的独立Store，再通过Svelte内置的setContext方法把这个Store注入当前实例的组件树上下文，参考代码：

<!-- App.svelte -->
<script>
  import { setContext } from 'svelte';
  import { createAppStore } from './store.js';
  import Viewport from './Viewport.svelte';
  import ControlPanel from './ControlPanel.svelte';

  // 接收嵌入代码传入的配置属性
  export let videoWidth;
  export let videoHeight;
  export let aspectRatio;

  // 生成当前实例专属的独立Store，和其他实例完全不共享
  const appStore = createAppStore({ videoWidth, videoHeight, aspectRatio });
  // 将专属Store注入当前组件树上下文，所有子组件都可以访问到
  setContext('appStore', appStore);
</script>

<Viewport />
<ControlPanel />

• 第三步：任意层级子组件从Context获取当前实例的Store使用
  不管嵌套多深的子组件，都不需要层层接收Props，直接通过getContext拿到当前组件所属实例的Store即可，所有的状态订阅、更新操作只会作用在当前实例的Store上，完全不会影响其他并行运行的App实例，参考代码：

<!-- ControlPanel.svelte 任意深层子组件均可使用 -->
<script>
  import { getContext } from 'svelte';
  // 获取到的是当前组件所属App实例的专属Store
  const appStore = getContext('appStore');

  function handleResize() {
    // 本次更新只会修改当前实例的状态，不会污染其他实例的数据
    appStore.setVideoSize(1280, 720);
  }
</script>

<button on:click={handleResize}>调整为720P尺寸</button>

• 零额外依赖，完全基于Svelte原生API实现，不需要引入Redux等第三方状态管理库
• 解决了普通Props传值的跨层级限制问题，不需要层层透传属性，减少冗余代码
• 解决了原生Context只能初始化传值、无法动态更新的问题：注入的Store本身是响应式的，状态变化时所有订阅的组件会自动触发更新，没有初始化阶段的配置限制
• 解决了全局单例Store的多实例冲突问题：每个App实例的Store都是独立创建的全新对象，通过Context的组件树隔离特性，子组件只会拿到所属实例的Store，状态完全隔离，不会出现数据互相覆盖的问题

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