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>

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

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

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

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

Answer 1

文档状态（强调我的）

定义页面或布局的组件可以导出在创建组件之前运行的加载函数。

这意味着您不能在常规组件中使用加载功能。

但是onMount，您仍然可以使用, 在安装组件时加载数据。

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

如果你真的不希望你的页面有一个大的加载函数，你也可以把它放在第三个文件（loader.js）中并从那里导入它（最后加载函数必须在页面中）

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