面试题：Svelte中writable store的基础应用

Question

请简述Svelte中writable store的作用，并且用代码示例展示如何创建一个简单的writable store，并在组件中订阅它来显示数据。

Answer 1

Svelte中writable store的作用

在Svelte中，writable store 用于创建可写的响应式数据存储。它提供了一种简单的方式来管理应用程序状态，使得状态的变化能够自动反映在依赖该状态的组件上。通过订阅 writable store，组件可以监听数据的变化并相应地更新自身。

代码示例

1. 创建一个简单的writable store： 首先，在一个单独的文件（例如 stores.js）中创建 writable store。

   import { writable } from'svelte/store';
   
   // 创建一个名为count的writable store，初始值为0
   export const count = writable(0);
   

2. 在组件中订阅它来显示数据： 然后，在Svelte组件（例如 App.svelte）中使用这个 store。

   <script>
       import { count } from './stores.js';
       let currentCount;
       const unsubscribe = count.subscribe((value) => {
           currentCount = value;
       });
   </script>
   
   <p>The current count is: {currentCount}</p>
   
   <script>
       // 当组件销毁时，取消订阅
       $: onDestroy(() => {
           unsubscribe();
       });
   </script>
   

在上述代码中，我们首先从 stores.js 中导入 count 这个 writable store。然后通过 subscribe 方法订阅 count 的变化，每当 count 的值发生变化时，回调函数中的 currentCount 就会更新，从而使得组件中的 <p> 标签能够显示最新的值。同时，为了避免内存泄漏，在组件销毁时通过 onDestroy 调用 unsubscribe 取消订阅。