在 Svelte 5 引入 runes 之前，存储是处理组件外部反应式状态的惯用方式。现在情况已不再如此，但当你使用 Svelte 时（包括在 SvelteKit 中，目前），你仍然会遇到存储，因此了解如何使用它们非常有价值。

我们不会介绍如何创建你自己的自定义存储——关于这一点，请查阅文档。

让我们回顾一下来自通用反应性练习的示例，但这次使用存储来实现共享状态。

在 shared.js 中，我们目前正在导出 count，它是一个数字。将其转换为可写存储

import { writable } from 'svelte/store';

export const count = writable(0);

要引用存储的值，我们以 $ 符号作为前缀。在 Counter.svelte 中，更新 <button> 内部的文本，使其不再显示 [object Object]

<button onclick={() => {}}>
	clicks: {$count}
</button>

最后，添加事件处理程序。因为这是一个可写存储，所以我们可以使用它的 set 或 update 方法以编程方式更新值……

count.update((n) => n + 1);

……但由于我们在组件中，因此我们可以继续使用 $ 前缀

<button onclick={() => $count += 1}>
	clicks: {$count}
</button>