9

如果下面的文件 test.svelte 是 /routes 中的一个页面，它会成功调用 load() 并使用它在我通过 http://localhost:3000/test 访问它时检索到的 JSON 数组填充模板。如果我将此文件移动到 /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 中检索数据并将其传递给组件，但我希望将数据检索封装在组件中以使其更简单。

4

1 回答 1

13

文档状态（强调我的）

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

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

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

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

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

<script context="module">
  import _load from './loader.js';
  export const load = _load;
</script>
于 2021-05-07T05:47:15.040 回答