如何在Svelte中仅获取一次共享数据并供嵌套组件访问

下面提供两种常用方案，实现仅一次API请求获取静态数据，且嵌套组件无需通过props即可访问：

方案1：使用Svelte Store（推荐） #

Svelte的Store天生支持跨组件共享响应式数据，适合这种全局静态数据场景：

1. 创建全局数据模块

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

// 初始化空数组的响应式store
const teams = writable([]);

// 页面加载时自动请求数据
async function fetchTeams() {
  const response = await fetch("http://endpoint/teams");
  const teamData = await response.json();
  teams.set(teamData);
}
fetchTeams();

export { teams };

2. 修改App.svelte，无需再维护本地teams变量

// App.svelte
<script>
  import TeamSelector from "./lib/TeamSelector.svelte";
  // 只需导入store，无需处理数据请求
  import { teams } from "./lib/teamsStore.js";
</script>

<div>
  Select two opposing teams: 

  Team 1: <TeamSelector/>
  Team 2: <TeamSelector/>
</div>

3. 修改TeamSelector.svelte，直接导入store使用

// TeamSelector.svelte
<script>
  import { teams } from "./teamsStore.js";
</script>

<!-- 使用$前缀访问store的当前值，数据更新时自动重新渲染 -->
<select>
  {#each $teams as team}
  <option value={team}>{team}</option>
  {/each}
</select>

方案2：使用Svelte Context API #

Context API适合需要在组件树中共享数据，但不想全局暴露的场景：

1. 在App.svelte中设置上下文

// App.svelte
<script>
  import { setContext, onMount } from 'svelte';
  import TeamSelector from "./lib/TeamSelector.svelte";

  let teams = [];

  onMount(async () => {
    const response = await fetch("http://endpoint/teams");
    teams = await response.json();
    // 将teams存入上下文，指定唯一标识'teams'
    setContext('teams', teams);
  });
</script>

<div>
  Select two opposing teams: 

  Team 1: <TeamSelector/>
  Team 2: <TeamSelector/>
</div>

2. 在TeamSelector.svelte中获取上下文数据

// TeamSelector.svelte
<script>
  import { getContext } from 'svelte';
  // 通过标识获取上下文数据
  const teams = getContext('teams');
</script>

<!-- 注意：若数据未加载完成时teams为空，可添加条件判断优化体验 -->
<select>
  {#each teams as team}
  <option value={team}>{team}</option>
  {/each}
</select>

提示：如果需要处理数据加载状态，可在store或上下文中额外维护一个isLoading变量，避免组件渲染空列表。

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