在 Svelte 5 引入 runes 之前，Stores 是在组件外处理响应式状态的惯用方式。虽然现在情况已经改变，但在使用 Svelte（包括目前的 SvelteKit）时，你仍会遇到 stores，所以了解如何使用它们很有价值。

我们不会介绍如何创建自定义 stores — 相关内容请查看文档。

让我们重新回顾通用响应式练习中的示例，这次我们使用 stores 来实现共享状态。

在 shared.js 中，我们目前导出的 count 是一个数字。将它转换为一个可写入（writable） 的 store：

import { writable } from 'svelte/store';

export const count = writable(0);

要引用 store 的值，我们在其前面添加 $ 前缀。在 Counter.svelte 中，更新 <button> 内的文本，使其不再显示 [object Object]：

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

最后，添加事件处理程序。由于这是一个可写入的 store，我们可以使用它的 set 或 update 方法以编程方式更新值...

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

...由于我们在组件中，我们可以继续使用 $ 前缀：

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