如何在更改页面/路由时保持 SvelteKit 中的可读存储不被取消订阅

问题描述

在 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 中的页面/路由之间导航时，取消订阅被调用，因此下一个页面/路由作为“第一个”订阅者调用 start 函数。

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

模板是否会获取商店值并将其作为道具传递给组件，或者只是阻止商店拥有“最后一个订阅者”（有效地保持大门敞开）？

解决方法

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

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

在脚本或模板中直接在 __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>

readable svelte svelte-store sveltekit