SvelteKit中Store在Layout可用但Page不可用问题求助

问题描述 #

在SvelteKit应用中使用Store存储用户登录邮箱时遇到以下问题：

• Store在+layout.svelte中可正常赋值并读取，但在+page.svelte中获取值为undefined
• VS Code保存触发HMR时，+page.svelte能正常读取Store值，但手动刷新页面后Store值变回undefined

相关代码：

stores.js #

// lib/stores.js
import { writable } from 'svelte/store';

export const userEmail = writable(null);

+layout.svelte #

// +layout.svelte
<script>
    import { userEmail } from "$lib/stores.js";

    import { onMount } from "svelte";
    import { auth } from "$lib/firebase/fbInit";

    onMount(() => {
        auth.onAuthStateChanged(async (user) => {
            if (user) {
                await userEmail.set(user.email);
                console.log($userEmail + " is connected"); // 此处Store正常显示用户邮箱
            } else {
                console.log("no user connected");
            }
        });
    });
</script>

examplepage/+page.svelte #

// examplepage/+page.svelte
<script>
    import { userEmail } from "$lib/stores.js";
    import { onMount } from "svelte";

    onMount(async () => {
        console.log("Email in store", $userEmail); // 此处显示undefined，但Layout中的console仍输出正确邮箱
    });
</script>

问题原因 #

核心问题是执行时机不匹配：

1. 手动刷新页面时，+page.svelte的onMount会在组件挂载后立即执行，而Firebase的auth.onAuthStateChanged是异步回调，需要时间完成用户状态校验，此时Store还未被赋值，所以读取到undefined
2. HMR场景下，页面组件是热更新挂载，此时Layout已经完成了Store的赋值，所以能读取到已有值

解决方案 #

方案1：直接监听Store响应式变化（推荐） #

利用Svelte的响应式特性，无需依赖onMount，只要Store值更新就会触发逻辑：

// examplepage/+page.svelte
<script>
    import { userEmail } from "$lib/stores.js";

    // 响应式监听Store值，有值时执行逻辑
    $: if ($userEmail) {
        console.log("Email in store", $userEmail);
    }
</script>

方案2：订阅Store等待值更新 #

如果必须使用onMount，可以通过订阅Store的方式等待值被赋值：

// examplepage/+page.svelte
<script>
    import { userEmail } from "$lib/stores.js";
    import { onMount } from "svelte";

    onMount(() => {
        // 订阅Store变化
        const unsubscribe = userEmail.subscribe(email => {
            if (email) {
                console.log("Email in store", email);
                unsubscribe(); // 获取到值后取消订阅，避免重复触发
            }
        });
        // 组件销毁时清理订阅
        return unsubscribe;
    });
</script>

方案3：提前初始化用户状态（SvelteKit Load函数） #

利用SvelteKit的load机制，在页面渲染前完成用户状态校验，确保Store或页面data已有值：

1. 创建+layout.js（客户端执行）：

// +layout.js
import { auth } from "$lib/firebase/fbInit";

export async function load() {
    return new Promise((resolve) => {
        auth.onAuthStateChanged(user => {
            resolve({ userEmail: user?.email || null });
        });
    });
}

2. 在Layout中同步Store：

// +layout.svelte
<script>
    export let data;
    import { userEmail } from "$lib/stores.js";

    // 响应式更新Store
    $: userEmail.set(data.userEmail);
</script>

3. 在Page中直接读取data：

// examplepage/+page.svelte
<script>
    export let data;

    onMount(() => {
        console.log("Email from load data", data.userEmail);
    });
</script>

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