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

Question

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

<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>

它产生这个错误:

Cannot destructure property 'isLoggedIn' of '__vite_ssr_import_1__.getContext(...)' as it is undefined.

Answer 1

要在所有页面中使用“上下文”，您可能应该只使用常规商店。

在外部 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>