解构Svelte的page对象时form属性为undefined的原因问询

这是因为page是SvelteKit提供的可写存储（Writable Store），不是普通的JavaScript对象。你直接解构的是存储容器本身，而非它包裹的实际状态值。

具体分析 #

• 当你写let pageDate = page时，pageDate指向的是存储对象，但在Svelte模板中使用pageDate.form时，Svelte会自动订阅存储并解析内部值，所以能正常访问。
• 但在script标签里直接解构let { form } = page，你拿到的是存储对象自身的属性（而非内部状态里的form），自然会是undefined。

解决方法 #

要在script中获取存储的内部值，有两种常用方式：

1. 使用自动订阅语法（$前缀）

<script lang="ts">
    import { enhance } from "$app/forms";
    import { page } from "$app/state";

    // 用$前缀自动订阅存储，获取最新状态值
    let { form } = $page;
</script>

2. 手动订阅存储

<script lang="ts">
    import { enhance } from "$app/forms";
    import { page } from "$app/state";
    import { onDestroy } from "svelte";

    let form;
    // 手动订阅，更新form值
    const unsubscribe = page.subscribe((currentPage) => {
        form = currentPage.form;
    });

    // 组件销毁时取消订阅，避免内存泄漏
    onDestroy(unsubscribe);
</script>

在模板中使用时，无论是$page.form还是直接page.form（Svelte会自动处理订阅）都能正常工作，但在script代码里必须通过$page或者手动订阅来获取实际的状态值。

内容的提问来源于stack exchange，提问作者Loïc Boset