我正在尝试使用 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)
赋值仅适用于局部变量或属性,不适用于导入/导出。
您必须对值进行装箱(这对于基元也是必要的,因为它们是复制而不是引用),例如
export let currentUser: { value: AuthModel | null } =
$state({ value: null });
currentUser.value = pb.authStore.model