面试题：Svelte中Context API在中等复杂场景下的应用

Question

假设你正在开发一个包含多层嵌套组件的Svelte应用，其中某些深层组件需要共享用户登录状态信息。请阐述如何使用Svelte Context API来实现这一功能，并且写出关键代码片段。

Answer 1

1. 使用Svelte Context API实现共享状态的步骤：
   • 设置上下文：在父组件中，使用 setContext 函数将用户登录状态信息设置到上下文中。
   • 获取上下文：在深层组件中，使用 getContext 函数获取设置在上下文中的用户登录状态信息。
2. 关键代码片段：
   • 父组件（例如 App.svelte）：

<script>
    import { setContext } from'svelte';
    let userLoggedIn = true; // 假设的用户登录状态
    setContext('userLoggedInContext', userLoggedIn);
</script>

{#if userLoggedIn}
    <p>用户已登录</p>
{/if}

{#if false}
    <!-- 嵌套多层的子组件结构 -->
    <SomeParentComponent>
        <SomeChildComponent>
            <DeepComponent />
        </SomeChildComponent>
    </SomeParentComponent>
{/if}

• 深层组件（例如 DeepComponent.svelte）：

<script>
    import { getContext } from'svelte';
    let userLoggedIn = getContext('userLoggedInContext');
</script>

{#if userLoggedIn}
    <p>从上下文获取到，用户已登录</p>
{/if}