面试题：Svelte中writable和derived store构建状态系统基础

Question

请阐述在Svelte中，writable store和derived store各自的作用是什么？并举例说明如何结合它们构建一个简单的状态系统，例如一个显示当前计数并根据计数判断是否为偶数的功能。

Answer 1

writable store的作用

• writable store用于创建一个可写的状态存储。它允许我们在应用程序的不同部分轻松地读写状态值，是Svelte中最基础的状态管理工具。通过writable创建的存储对象有subscribe方法用于订阅状态变化，set方法用于直接设置新值，update方法用于基于当前值更新状态。

derived store的作用

• derived store用于基于一个或多个现有的store创建一个新的store，新store的值会随着依赖的store值的变化而自动更新。它适用于需要根据其他状态衍生出计算值的场景，避免了手动监听依赖状态变化并进行计算的繁琐操作。

结合示例

<script>
    import { writable, derived } from 'svelte/store';

    // 创建一个writable store用于计数
    const count = writable(0);

    // 创建一个derived store用于判断计数是否为偶数
    const isEven = derived(count, $count => $count % 2 === 0);
</script>

<button on:click={() => count.update(n => n + 1)}>Increment</button>

<p>Count: {$count}</p>
<p>Is even: {$isEven}</p>

在上述代码中：

• count是一个writable store，通过count.update(n => n + 1)可以实现计数增加。
• isEven是一个derived store，依赖于count。每当count的值发生变化时，isEven会自动重新计算其值，即判断count的值是否为偶数。
• 在模板中，{$count}和{$isEven}用于显示当前count的值和isEven的衍生值。