如何在Svelte中创建一个可以在所有页面中使用的上下文?

Question

我目前正在学习Svelte，我想为这个副项目创建一个身份验证流。通常，在React中，我习惯使用上下文保存身份验证信息。

<AuthContext>
<App />
<AuthContext>

我想知道Svelte是否也可以执行类似的方法?所有教程都是基于组件的上下文。我想在整个应用程序中调用getContext('authContext')。

AuthContext.svelte

<script lang='ts'>
import { writable } from 'svelte/store'
import { onDestroy, setContext } from 'svelte'
import {getAuth, type User, onAuthStateChanged} from 'firebase/auth'

const auth = getAuth()
const userStore = writable<User | null>(null)
const isLoggedIn = writable<boolean>(false)

const contexts = {
isLoggedIn,
userStore,
logOut,
}

const unsubscribe =  onAuthStateChanged(auth, (user) => {
if(user) {
userStore.set(user)
isLoggedIn.set(true)
}
})
setContext('authContext', contexts)

function logOut() {
auth.signOut()
isLoggedIn.set(false)
}


onDestroy(() => unsubscribe())

</script>

我在__layout.svelte:

中调用getContext

<script lang='ts'>
import {getContext} from 'svelte'
const {isLoggedIn} = getContext('authContext')

</script>

产生如下错误:

不能解构'__vite_ssr_import_1__.getContext(...)'的属性'isLoggedIn'，因为它是未定义的。

Answer 1

在所有页面中使用的'context'你应该去普通的商店。

在外部javascript文件中定义存储:

// ./stores.js
import { writable } from 'svelte/store';
export const loggedIn = writable(false);
export const user = writable(null);

并在需要的地方导入它:

<!-- Component.svelte -->
<script>
import { loggedIn } from './stores.js';
</script>

Answer 2

不确定这是否必须通过SvelteKit中的组件完成?背景就不能这样建立和设置吗?REPL
(我习惯在没有上下文的情况下这样做，比如这个REPL)

App.svelte h5> authContext.js h5> Component.svelte h5> /html>