面试题：Svelte中readable store实际案例中的数据更新机制

在Svelte应用中，假设你有一个使用readable store的案例，其中store的数据需要根据用户的特定操作（比如点击按钮）进行更新。请描述实现这一功能的步骤，包括如何定义store以及如何在事件处理函数中更新store的值。

44.0万热度

难度

前端开发Svelte

定义可读存储（readable store）：

在Svelte中，使用readable函数来创建可读存储。例如：

import { readable } from'svelte/store';

const myStore = readable(initialValue, (set) => {
    // 这里可以进行一些初始化逻辑，比如设置初始值
    // set(initialValue);
    // 返回一个清理函数（可选），当不再需要这个store时会被调用
    return () => {
        // 清理逻辑
    };
});

这里initialValue是存储的初始值，可以是任何类型的数据，比如0、''、[]等。

在组件中使用并更新存储：
- 在Svelte组件中引入并使用这个存储。
```
<script>
    import { myStore } from './path/to/store.js';
    let count = 0;
    const handleClick = () => {
        // 这里获取当前store的值并更新为新的值
        myStore.update((value) => {
            return value + 1;
        });
        // 另一种方式是直接获取store的值并设置新值
        // myStore.set(count++);
    };
</script>

<button on:click={handleClick}>点击更新store</button>
<p>store的值: {$myStore}</p>
```
- 在handleClick函数中，当按钮被点击时，使用update方法来更新存储的值。update方法接收一个函数，该函数以当前存储的值作为参数，并返回新的值来更新存储。也可以直接使用set方法设置新的值。
- 在模板中，通过{$myStore}的语法来使用存储的值。这样，当存储的值更新时，模板会自动重新渲染。

星途面试题库

面试题：Svelte中readable store实际案例中的数据更新机制

知识考点

面试题答案