如何在更改 pages/routes 时保持 SvelteKit 中的可读存储不被取消订阅

Question

在 SvelteKit 中，每次在 /first 和 /second 路由之间导航时，我都会将“已订阅”和“未订阅”记录到控制台。我想为每个访问该网站的用户提供可读的启动功能运行一次 - 允许我存储不经常更改的获取数据。

// stores.ts
import { readable } from 'svelte/store'
const { VITE_WEB_URL } = import.meta.env

export const message = readable('', set => {
  console.log('Subscribed')
  const fetchMessage = async () => {
    const url = `${VITE_WEB_URL}/api/message`
    const response: Response = await fetch(url)
    return await response.text()
  }
  fetchMessage()
    .then(set)
    .catch(err => console.error('Failed to get message', err))
  return () => {
    console.log('Unsubscribed')
  }
})

<!-- /routes/first.svelte -->
<script>
    import { message } from '../stores'
</script>

<h1>First: {$message}</h1>

<a href="/second">Second</a>

<!-- /routes/second.svelte -->
<script>
    import { message } from '../stores'
</script>

<h1>Second: {$message}</h1>

<a href="/first">First</a>

当我在 SvelteKit 中的 pages/routes 之间导航时，取消订阅被调用，因此下一个 page/route 调用启动函数作为“第一个”订阅者。

如何在不重新运行启动函数的情况下在多个 pages/routes 之间共享可读存储？我听说过有关使用模板的建议，但从未见过示例。

模板会获取存储值并将其作为属性传递给组件，还是只是阻止存储有“最后一个订阅者”（有效地保持大门打开）？

Answer 1

说是第一个订阅者订阅时调用，最后一个订阅者取消订阅时调用删除函数。当您更改路线时，它会取消订阅所有订阅者，然后运行删除功能，然后当您到达下一条路线时，它会重新运行初始功能。

Answer 2

如果您使用的是模板，可读存储可以通过多种方式保持订阅状态，以免重新调用启动函数：

直接在 __layout.svelte 脚本或模板中引用 $message
正在加载直接引用 $message 或包含引用 $message 的 Svelte 组件的其他 Svelte 组件。

<!-- /lib/ComponentUsingMessage.svelte-->
<script>
  import { message } from '../stores'
</script>

<p>{$message}</p>

<!-- /routes/__layout.svelte-->
<script>
  import { message } from '../stores'
  // Or include a component in the template that loads $message...
  import ComponentUsingMessage from '$lib/ComponentUsingMessage.svelte'
</script>

<main>
  Both subscribe but do not unsubscribe while template is loaded:
  {$message}
  <ComponentUsingMessage/>

  <slot></slot>
</main>

如何在更改 pages/routes 时保持 SvelteKit 中的可读存储不被取消订阅

How to keep a readable store in SvelteKit from being unsubscribed when changing pages/routes

readable

svelte

svelte-store

sveltekit