Skip to main content

すべてのアプリケーションの状態がアプリケーションのコンポーネント階層の内部にあるわけではありません。場合によっては、関連のない複数のコンポーネントや、通常の JavaScript モジュールからアクセスする必要のある値があります。

Svelte では、これを ストア(store) で行います。ストアとは、単に、値が変化するたびに関係者に通知する subscribe メソッドを備えたオブジェクトです。App.sveltecount はストアであり、count.subscribe のコールバックの中で countValue を設定しています。

stores.js タブをクリックして count の定義を見てください。これは 書き込み可能なストア(writable store) です。つまり、 subscribe メソッドに加えて、setupdate メソッドも兼ね備えています。

次に、Incrementer.svelte タブに移動して、+ ボタンと連動するようにします。

ts
function increment() {
count.update((n) => n + 1);
}

+ ボタンをクリックすると、カウントが更新されます。Decrementer.svelte に戻す機能を実装してみてください。

最後に、Resetter.sveltereset を実装します。

ts
function reset() {
count.set(0);
}