面试题：Svelte中如何创建一个简单的readable store并在组件中使用它

创建只读状态（readable store）的基本步骤：

导入 readable 函数：从 svelte/store 模块中导入 readable 函数，这个函数用于创建可读的 store。
定义初始值和更新逻辑：在调用 readable 函数时，传入初始值作为第一个参数。第二个参数是一个可选的回调函数，用于定义如何在 store 订阅或取消订阅时执行一些操作，例如设置或清理一些资源。在这个回调函数内部，可以返回一个清理函数，用于在取消订阅时执行清理操作。

示例代码：

创建可读的 store：

// stores.js
import { readable } from'svelte/store';

const myReadableStore = readable('初始值', (set) => {
    // 这里可以进行一些初始化操作
    // set 函数用于更新 store 的值
    return () => {
        // 这里可以进行清理操作，比如取消定时器或解绑事件监听器
    };
});

export { myReadableStore };

在组件中引入并使用可读的 store：

<!-- MyComponent.svelte -->
<script>
    import { myReadableStore } from './stores.js';
    let value;
    const unsubscribe = myReadableStore.subscribe((newValue) => {
        value = newValue;
    });
    // 如果你想在组件销毁时取消订阅
    $: onDestroy(() => {
        unsubscribe();
    });
</script>

<div>
    <p>可读 store 的值: {value}</p>
</div>

在上述代码中，首先在 stores.js 文件中创建了一个名为 myReadableStore 的可读 store。然后在 MyComponent.svelte 组件中导入并使用这个 store，通过 subscribe 方法订阅 store 的变化，并将最新的值赋给 value 变量，最后在模板中展示这个值。如果需要在组件销毁时取消订阅，可以使用 onDestroy 钩子函数来调用 unsubscribe 函数。

星途面试题库

面试题：Svelte中如何创建一个简单的readable store并在组件中使用它

知识考点

面试题答案

创建只读状态（readable store）的基本步骤：

示例代码：