svelte - 将数据从一个页面发送到另一个页面而不是预加载？

Question

假设我有一个 blog加载所有博客文章的完整数组的路由。个人博客帖子位于 blog/[postId] .是否有一种 Sapper 惯用的方式来传递来自 blog 的单个帖子的数据至 blog/[postId] ?

基本上，如果您在 blog我想预加载显示代码 blog/[postId] .然后当您单击指向 blog/[postId] 的链接时，立即导航并显示来自 blog 的数据.当然，如果您直接导航到 blog/[postId]然后 preload()仍然应该被调用。
prefetch并没有完全做到，因为这仍然需要网络请求。我还尝试了一个检查商店的预加载，除非它是空的，否则不会发出网络请求，但是你不能在 <script context="module"> 中使用商店。 .

Answer 1

感谢@three your comment这让我得到了答案。

如果路由或 _layout组件导出preload() ，它总是在导航时被调用。所以我最终通过将获取的数据存储在 preload() 的第二个参数中来完成此操作。 ，通常称为 session并且似乎在所有组件之间共享。而我只打了电话this.fetch()如果数据不存在。

<!-- blog/index.svelte -->
<script context="module">
  export async function preload (page, session) {
    let {posts} = session;
    if (undefined === posts) {
      const response = await this.fetch('blog/posts.json');
      posts = await response.json();
      session.posts = posts
    }

    return {posts}
  }
</script>

<script>
  export let posts;
</script>

{#each posts as post}
  <!-- ... -->
{/each}

然后在 [slug].svelte检查 session.posts对于您正在寻找的帖子，如果它不存在，请加载它。

<!-- blog/[slug].svelte -->
<script context="module">
  export async function preload (page, session) {
    const {slug} = page.params
    const {posts} = session
    let post

    if (undefined === posts) {
      const response = await this.fetch(`blog/${slug}.json`)
      post = await response.json()
    } else {
      post = posts.find(p => p.slug === slug)
    }

    if (undefined === post) {
      this.error(404, "Sorry we couldn\'t find that post")
    }

    return {post}
  }
</script>

<script>
  export let post
</script>

<!-- ... render post -->

现在导航是即时的。为了最终的健壮性，如果数据陈旧(比如超过 5 分钟，无论如何)，您可以添加检查以重新加载。

编辑

您实际上并不需要使用 session 本身。如果您只想制作 session preload(page, session) 的参数不是 undefined您可以在 server.js 中使用它:

sapper.middleware({
  // Define session parameter as an empty object
  session: (req, res) => ({})
})