Передача значений из макета во вложенные дочерние маршруты в svelte sapper?

Question

[Редактировать] Я обновил пример, чтобы включить как использование предварительной загрузки (userb), так и {#await} (usera). Оба сценария usera и userb не определены в /users/[username]/about.svelte

, как бы вы работали примерно так:

/ users / [username] / _ layout.svelte

{#await promise}
  Loading...
  <slot {usera} {userb}/>
{:then usera}
  { JSON.stringify({usera, userb}) }
  <slot {usera} {userb}/>
{/await}

<script context="module">
    export async function preload(page, session) {
        let userb = await fetchUser(page.params.username)
        return { userb };
    }
</script>

<script>
import { stores } from '@sapper/app'
const { page } = stores();

export let userb;
let usera

async function fetchUser (username) {
  return new Promise(resolve => setTimeout(() => {
    resolve({ username });
  }, 333))
}

let promise = fetchUser($page.params.username)
</script>

/ users / [username] /about.svelte

{#if usera}
  <span>{usera.username}</span>
{:else}
 NULL USER_A
{/if}

{#if userb}
  <span>{userb.username}</span>
{:else}
 NULL USER_B
{/if}

<script>
export let usera
export let userb

$: console.log({ usera })
$: console.log({ userb })
</script>

Похоже, что / user /: username / about не получает пользователя prop от _layout. Это работает в nuxt (в основном это sapper для vuejs вместо svelte).

Answer 1

Я не вижу твоей функции выдвижения. Посмотрите документы по предварительной загрузке на https://sapper.svelte.dev/docs#Preloading

В вашем коде должно быть что-то подобное. Предварительная загрузка необходима для загрузки данных до отображения страницы. И это работает, только если вы включите его в скрипт с контекстом модуля (<script context="module">)

{#await userPromise}
  <p>...waiting</p>
{:then user}
  <slot {user}></slot>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

<script context="module">
  export async function preload({ params }) {
    console.log('layout')
    const { username } = params;
    return { username };
  }
</script>

<script>
  function delay(t, v) {
    return new Promise(function(resolve) {
      setTimeout(resolve.bind(null, v), t);
    });
  }
  export let username;
  export let userPromise = fetchUser($page.params.username)
</script>