SvelteKit

Question

如果下面的文件 test.svelte 是 /routes 中的一个页面，它会成功调用 load() 并使用它在我通过 http:// 访问它时检索到的 JSON 数组填充模板本地主机：3000/测试。如果我将此文件移动到 /lib 并将其作为组件导入 /routes/index.svelte，当我转到 http://localhost:3000.

时，组件的 load() 方法永远不会运行

test.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

文档状态（强调我的）

A component that defines a page or a layout can export a load function that runs before the component is created.

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

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

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

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

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

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

SvelteKit - load() not called from component but works as a Page

svelte

svelte-3