SvelteKit中如何在+layout.svelte中获取+page.js返回的数据？

默认情况下，+layout.svelte无法直接访问同级或子级+page.js里load函数返回的数据，不过有几种实用的方案可以实现需求：

方案1：将数据获取逻辑移到+layout.js #

如果这份数据是布局和多个子页面都需要的，直接在对应路由层级的+layout.js里编写load函数获取数据。这样+layout.svelte和所有子页面的+page.svelte都能通过export let data拿到数据。

示例代码：

// +layout.js
export async function load({ fetch }) {
  const res = await fetch('/api/your-target-endpoint');
  const pageRelatedData = await res.json();
  return { pageRelatedData };
}

在+layout.svelte中使用：

<script>
  export let data;
</script>

<p>布局中使用页面数据：{data.pageRelatedData.someField}</p>

方案2：通过上下文或插槽向布局传递数据 #

如果仅当前页面的布局需要这份数据，可以用Svelte的上下文API或者插槽props传递：

用上下文传递 #

在+page.svelte中设置上下文：

<script>
  import { setContext } from 'svelte';
  export let data;

  // 用Symbol作为唯一键，避免命名冲突
  const PAGE_DATA_KEY = Symbol('page-specific-data');
  setContext(PAGE_DATA_KEY, data);
</script>

<!-- 页面内容 -->

在+layout.svelte中获取上下文：

<script>
  import { getContext } from 'svelte';
  const PAGE_DATA_KEY = Symbol('page-specific-data');
  const pageData = getContext(PAGE_DATA_KEY);
</script>

{#if pageData}
  <p>布局中拿到的页面数据：{pageData.someField}</p>
{/if}

用插槽props传递 #

在+layout.svelte中定义带props的插槽：

<slot {pageData} />

在+page.svelte中通过片段传递数据：

<script>
  export let data;
</script>

<svelte:fragment slot="" pageData={data}>
  <!-- 页面内容 -->
</svelte:fragment>

方案3：用Svelte Store共享数据 #

如果需要跨多个路由或组件共享这份数据，可以用Svelte的store：

1. 创建一个store文件（比如src/stores/pageData.js）：

import { writable } from 'svelte/store';
export const pageDataStore = writable(null);

2. 在+page.js的load函数中更新store：

import { pageDataStore } from '$stores/pageData';

export async function load({ fetch }) {
  const res = await fetch('/api/your-endpoint');
  const data = await res.json();
  pageDataStore.set(data);
  return { data };
}

3. 在+layout.svelte中订阅store：

<script>
  import { pageDataStore } from '$stores/pageData';
  import { onDestroy } from 'svelte';

  let pageData;
  const unsubscribe = pageDataStore.subscribe(value => {
    pageData = value;
  });

  // 组件销毁时取消订阅
  onDestroy(unsubscribe);
</script>

{#if pageData}
  <p>布局中从store拿到的页面数据：{pageData.someField}</p>
{/if}

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