Svelte 5でruneが導入される前は、ストアはコンポーネントの外でリアクティブな状態を処理するための慣用的な方法でした。もうそうではありませんが、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>