Svelte Context与Svelte Store的区别及适用场景

一、核心区别 #

1. 作用域范围 #

• Context：属于组件树局部作用域，仅能在调用setContext的父组件及其所有后代组件中访问，超出该组件分支无法获取。
• Store：默认是全局作用域（可通过模块封装限制访问），整个应用的任何组件、页面都能直接导入使用。

2. 依赖关系 #

• Context：依赖组件层级结构，必须先在父组件中用setContext设置上下文，后代组件才能通过getContext获取，脱离组件树无法生效。
• Store：完全独立于组件树，无需依赖任何组件，导入对应Store模块即可直接使用。

3. 响应式特性 #

• Context：本身不具备响应式能力，若需要响应式，必须结合Svelte Store（如writable）或derived使用。
• Store：天生自带响应式，writable、readable、derived三种类型的Store都能自动追踪数据变化，更新所有依赖该Store的组件。

4. 数据共享定位 #

• Context：专注于组件树内的局部数据传递，主要解决多层组件间的props drilling问题。
• Store：专注于全局跨组件/跨页面的数据共享，适合存放需要全局访问的状态。

二、适用场景 #

优先使用Context的情况 #

• 需要在特定组件分支中共享数据，不想让全局其他组件访问到（比如某个表单的配置、弹窗的上下文状态）。
• 开发组件库时，父组件给子组件传递配置或状态，避免多层props传递。
• 仅需在局部组件树内实现响应式（可结合Store使用），无需全局共享的场景。

示例：用Context传递局部响应式状态

<!-- ParentComponent.svelte -->
<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  import ChildComponent from './ChildComponent.svelte';

  const panelState = writable({ collapsed: false });
  setContext('panelState', panelState);
</script>

<ChildComponent />

<!-- ChildComponent.svelte -->
<script>
  import { getContext } from 'svelte';
  const panelState = getContext('panelState');
</script>

<button on:click={() => $panelState.collapsed = !$panelState.collapsed}>
  {$panelState.collapsed ? '展开' : '收起'}面板
</button>

优先使用Store的情况 #

• 数据需要全局共享，比如用户登录状态、购物车数据、全局主题设置，这些状态需在多个不相关组件中访问和修改。
• 需要全局响应式，数据变化时所有依赖该Store的组件自动更新。
• 数据需要被多个页面、路由组件访问的场景。

示例：全局购物车Store

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

export const cart = writable([]);

export const addToCart = (item) => {
  cart.update(items => [...items, item]);
};

// ProductCard.svelte
<script>
  import { addToCart } from '../stores/cart.js';
  export let product;
</script>

<button on:click={() => addToCart(product)}>加入购物车</button>

// CartSummary.svelte
<script>
  import { cart } from '../stores/cart.js';
</script>

<p>购物车共有 {$cart.length} 件商品</p>

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