面试题：Svelte中如何构建基础的状态管理模式

Question

在Svelte项目中，阐述如何通过自定义store来构建一个简单的状态管理模式，用于管理组件间共享的数据，例如一个全局的用户登录状态。请举例说明其实现步骤和关键代码。

Answer 1

1. 创建自定义store：
   • 在Svelte中，可以使用writable来创建一个可写的store。首先，安装svelte/store。如果使用npm，运行npm install svelte/store。
   • 创建一个新的文件，例如userStore.js，代码如下：

import { writable } from'svelte/store';

// 创建一个用于存储用户登录状态的store
export const userLoginStore = writable(false);

2. 在组件中使用store：
   • 在需要使用该状态的组件中，导入这个store。例如，在Login.svelte组件中：

<script>
    import { userLoginStore } from './userStore.js';
    const login = () => {
        userLoginStore.set(true);
    };
</script>

<button on:click={login}>登录</button>

• 在另一个组件Profile.svelte中，可以读取这个状态：

<script>
    import { userLoginStore } from './userStore.js';
    let isLoggedIn;
    userLoginStore.subscribe((value) => {
        isLoggedIn = value;
    });
</script>

{#if isLoggedIn}
    <p>欢迎，用户已登录。</p>
{:else}
    <p>请先登录。</p>
{/if}

3. 关键代码说明：
   • writable函数创建了一个store对象，它有subscribe、set和update方法。
   • subscribe方法用于订阅store的变化，当store的值改变时，传入的回调函数会被执行。
   • set方法用于直接设置store的值，如在Login.svelte组件中的userLoginStore.set(true);。
   • update方法用于基于当前值更新store的值，例如：

userLoginStore.update((currentValue) => {
    return!currentValue;
});

• 这样，通过自定义store，我们可以方便地在不同组件间共享和管理全局状态，如用户登录状态。