面试题：Svelte中readable与writable如何协作实现简单计数器功能

Question

在Svelte项目中，要求你使用readable和writable状态管理机制来实现一个简单的计数器功能。当点击按钮时，计数器增加，并且在组件内实时显示计数数值。请描述实现思路，并给出关键代码片段。

Answer 1

实现思路

1. 导入必要模块：从 svelte/store 中导入 readable 和 writable 用于状态管理。
2. 创建计数器状态：使用 writable 创建一个可写的计数器存储，初始值设为0。
3. 创建增加计数器的函数：该函数通过 set 方法修改 writable 存储中的计数器值。
4. 在组件中使用计数器状态：在组件模板中显示计数器的值，并绑定点击事件到增加计数器的函数。

关键代码片段

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

    // 创建可写的计数器存储，初始值为0
    const count = writable(0);

    // 增加计数器的函数
    const increment = () => {
        count.update(n => n + 1);
    };
</script>

<button on:click={increment}>Increment</button>
<p>The count is: {$count}</p>