如何在 hooks.client.ts 中使用 $state？

Question

我正在尝试使用 Pocketbase 和 Svelte 5 实现身份验证，遵循 此存储库。

在

$lib/stores/user.svelte.ts

我正在创建一个

$state

商店（不知道如何称呼它？）：

// src/lib/stores/user.svelte.ts
import { type AuthModel } from 'pocketbase'
export let currentUser: AuthModel | null = $state(null)

在

hooks.client.ts

中，我应该监视 Pocketbase 的身份验证存储中的更改，但由于

$state

在 .ts 文件中不起作用，我想我应该将该代码移动到

+layout.svelte

中：

// src/+layout.svelte
<script lang="ts">
    import { pb } from '$lib/pocketbase'
    import { currentUser } from '$lib/stores/user.svelte'

    let { children } = $props()

    pb.authStore.loadFromCookie(document.cookie)
    pb.authStore.onChange(() => {
        currentUser = pb.authStore.model
        document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
    }, true)
</script>

{@render children()}

如果我理解正确，

$state

仅适用于.svelte和.svelte.ts文件，它应该使

currentUser

表现得像普通变量一样。根据 docs，重新分配也应该有效。然而，在 VSCode 中我得到：

Cannot assign to import svelte(constant_assignment)

Answer 1

赋值仅适用于局部变量或属性，不适用于导入/导出。

您必须对值进行装箱（这对于基元也是必要的，因为它们是复制而不是引用），例如

export let currentUser: { value: AuthModel | null } =
    $state({ value: null });

currentUser.value = pb.authStore.model