SvelteKit布局无法随Store更新同步用户凭证数据求助

问题根源 #

你的布局组件依赖+layout.server.ts的load函数返回数据，但服务端与客户端的Store完全隔离：

• +layout.server.ts运行在服务端，仅在页面初始化时执行一次load，返回当时的Store初始值；后续客户端更新Store时，服务端不会重新触发load，布局的data也就不会同步更新。
• 页面组件能正常更新是因为它直接订阅了客户端的Store（$tokens），而布局组件却在使用服务端传来的静态数据。

解决方案 #

直接在布局和页面组件中订阅客户端Store，放弃通过服务端load传递Store数据的方式，确保所有组件都使用同一来源的实时数据。

1. 修改布局组件 src/routes/main/+layout.svelte #

<script lang="ts">
  import { tokens } from "$lib/auth";
</script>

<p>{"Store data from the layout: " + $tokens.refresh_token}</p>

<slot/>

2. 清理无效的服务端逻辑 src/routes/main/+layout.server.ts #

直接删除该文件；如果需要在服务端初始化token（比如从Cookie读取），可改为：

import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ cookies }) => {
  // 从Cookie或服务端会话获取初始token，而非订阅客户端Store
  const refreshToken = cookies.get('refresh_token') || 'none';
  const accessToken = cookies.get('access_token') || 'none';
  
  return { initialTokens: { refresh_token: refreshToken, access_token: accessToken } };
};

若使用上述初始化逻辑，布局组件可在客户端同步初始值到Store：

<script lang="ts">
  import { tokens } from "$lib/auth";
  export let data;

  // 初始化时同步服务端的初始token到客户端Store
  $: tokens.set(data.initialTokens);
</script>

<p>{"Store data from the layout: " + $tokens.refresh_token}</p>

<slot/>

3. 统一页面组件的Store使用方式 src/routes/main/+page.svelte #

<script>
  @ts-nocheck
  import { tokens } from "../../lib/auth";
  export let data;
</script>

<p>{"Store data from main page: " + $tokens.refresh_token}</p>
<div class="container mx-auto p-8 space-y-8">
  <h1 class="h1">Main</h1>

  <ol class="list">
    {#each data.items.data as item}
      <li>
        <span>{item.id}</span>
        <span class="flex-auto">{item.title}</span>
      </li>
    {/each}
  </ol>
</div>

核心原理 #

• Svelte的$store语法是客户端的响应式订阅，能实时跟踪Store的变化；只要组件在客户端运行（所有页面/布局组件默认都会在客户端hydrate），就能自动更新UI。
• 服务端的load函数仅负责初始化页面的静态数据，无法跟踪客户端的动态状态变化，因此不能用它来传递需要实时更新的Store数据。

内容的提问来源于stack exchange，提问作者Afonso Lopez