SvelteKit - load() 不是从组件调用，而是作为页面工作

Question

如果下面的文件 test.svelte 是 /routes 中的页面，它会成功调用 load() 并使用我通过 http://localhost:3000/test 访问它时检索到的 JSON 数组填充模板。如果我将此文件移动到 /lib 并将其作为 /routes/index.svelte 中的组件导入，则当我访问 http://localhost:3000 时，该组件的 load() 方法永远不会运行。

测试.svelte

<script context="module" lang="ts">
  /**
     * @type {import('@sveltejs/kit').Load}
   */
  export async function load({ fetch }) {
    const url = '/api/announcement'
    const res: Response = await fetch(url)

    if (res.ok) {
      const sections: Announcement[] = await res.json()
      return {
        props: {
          sections
        }
      }
    }

    return {
      status: res.status,
      error: new Error(`Could not load ${url}`)
     }
  }
</script>

<script lang="ts">
  export let sections: Announcement[] = []
</script>

<template>
  {#each sections as section}
    <p>
      {section.title}<br/>
      {section.description}
    </p>
  {/each}
</template>

这里是 paths/index.svelte，尝试将其作为组件从 /lib 加载：

<script context="module" lang="ts">
  import Test from '$lib/test.svelte'
</script>

<template lang="pug">
  .container
    Test
</template>

似乎我正在做一些明显错误的事情，但我是 Svelte 和 SvelteKit 的新手。虽然我考虑在 paths/index.svelte 中检索数据并将其传递给组件，但我希望将数据检索封装在组件中以使其更简单。

Answer 1

文档状态（强调我的）

定义 page 或 layout 的组件可以导出在创建组件之前运行的加载函数。

这意味着您不能在常规组件中使用load函数。

但是，您仍然可以使用

onMount

，在安装组件时加载数据。

或者，您可以将加载函数保留在页面中，并将检索到的值传递给组件本身。

如果您确实不想在页面中使用大型加载函数，您也可以将其放在第三个文件（loader.js）中，然后从页面中导入它（最后加载函数必须位于页）

<script context="module">
  import _load from './loader.js';
  export const load = _load;
</script>

编辑2023年5月31日

上述解决方案在回答之日适用于 SvelteKit，在更高版本中，

load

函数已被提取到它自己的文件

+page.js

（或

+layout.js

），详细信息可以在文档中找到。
但基本原理保持不变：加载数据仅适用于页面和布局，组件从 props 中获取数据（或者从 onMount 中的获取）

Answer 2

为上面的

Stephane's

答案添加更多可视化内容。

例如：如果您有一个主页并且需要重定向到

/login

src/
└── routes/
    ├── +page.svelte        // Entry Point
    ├── +page.js            // Js file of your entry point
    └── login/
        └── +page.svelte    // Login page

.svelte

：定义组件的用户界面和行为。

.js or .ts

：在渲染组件之前处理数据加载逻辑、重定向和其他功能。