当前位置：首页 > article >正文

【前端】Svelte的Writeable Store使用

article 2025/2/9 1:37:56

什么是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在多个组件间共享状态，同时反映值的更改，
在这里插入图片描述