【前端】Svelte的Writeable Store使用
@TOC
推荐超级课程：
什么是Store
在Svelte中，变量通常只能在一个组件内使用。但是，随着应用程序的复杂化，会出现需要在多个组件间共享状态的情况。在这种情况下，使用Svelte的“Store”机制，可以轻松地在多个组件间共享变量。
Svelte准备了几种可以根据用途区分使用的Store类型。具体来说，存在以下4种类型：
- Writable Store：可以引用和更新值的Store。是最基本且常用的Store类型。
- Readable Store：只能引用值的Store。用于防止其他组件或处理更改值的情况。
- Derived Store：根据其他Store的值动态变化的Store。例如，用于保持基于某个Store的值自动计算的结果。
- Custom Store：当上述Store类型无法满足需要独特逻辑时，使用Svelte提供的函数以外的方法创建的Store。
本文将聚焦于Writable Store，详细说明其基本使用方法和应用示例。
Writable Store
Writable Store是Svelte Store中最常见的，可以引用和更新值的Store。由此，可以动态管理在多个组件间共享的状态。
首先，让我们看看基本的Writable Store的定义和使用方法。以下示例展示了使用数值型（number型）的Writable Store，在多个组件间共享和操作数值的情况。这是基于Svelte官方发布的Writable Store教程程序，我进行了一些修改。
import { type Writable, writable } from 'svelte/store';
export const count: Writable<number> = writable(0);
在这段代码中，从svelte/store导入了writable函数和Writable类型。writable函数是用于创建具有指定初始值的新Writable Store的函数。这里，传递0作为初始值，并以count为名导出。此外，通过明确指定Writable类型，明确了这个Store保持的是number型的值。
对Writable Store可以进行以下3个主要操作：
set(value)：将Store的当前值设置为value。由此，新的值会通知到使用该Store的所有组件。subscribe(callback)：订阅Store，每当Store的值变化时调用callback函数。callback以Store的新值作为参数接收。返回解除订阅的函数，必要时可以解除订阅。update(updater)：基于Store的当前值计算新值，并设置到Store中。updater是接收当前值作为参数，返回计算后新值的函数。例如，想要增加计数器的值时，使用这个方法。
接下来，介绍使用上述创建的count Store具体实现程序的示例。假设以下文件结构：
src
├── app.d.ts
├── app.html
├── lib
│ ├── components
│ │ ├── Decrementer.svelte
│ │ └── Incrementer.svelte
│ └── stores.ts
└── routes
└── +page.svelte
基于这个结构，首先在+page.svelte中展示当前count的值和Incrementer以及Decrementer组件的代码如下：
<script lang='ts'>
import { count } from '$lib/stores.ts';
import Incrementer from '$lib/components/Incrementer.svelte';
import Decrementer from '$lib/components/Decrementer.svelte';
let count_value: number;
count.subscribe((value) => {
count_value = value;
});
</script>
<h1>The count is {count_value}</h1>
<Incrementer />
<Decrementer />
在这段代码中，使用count.subscribe()订阅count Store，每当Store的值变化时count_value会更新。count_value通过HTML内的<h1>标签显示，始终反映最新状态。
接下来，实现用于更改count Store值的Incrementer.svelte组件。
<script lang='ts'>
import { count } from '$lib/stores.ts';
function increment() {
count.update((n) => n + 1);
}
</script>
<button on:click={increment}>+</button>
<style>
button {
width: 40px;
height: 40px;
border: solid black 1.5px;
border-radius: 50%;
background: #fff;
}
</style>
这个Incrementer.svelte是用于将Store中保存的数值增加1的按钮组件。使用update方法，基于当前值计算新值（这里增加1），并设置到Store中。同样地，在Decrementer.svelte中实现从当前值减去1的按钮组件。
由此，可以通过Store在多个组件间共享状态，同时反映值的更改，
至此，我们已经介绍了Writable Store的基本使用方法和具体的应用示例。通过使用Store，可以在多个组件间共享状态，并轻松实现响应式操作。特别是当多人进行开发或应用程序规模变大时，利用Store可以提高代码的可维护性和可读性。