基本的なストアの利用方法
基本的なストアの利用法を、図2のサンプルで説明します。カウンターの値が格納されたストアをもとに、CountDisplayコンポーネントがカウンターの値を表示、CountOperatorコンポーネントが変更します。
ストアの実装はリスト1の通りです。（1）でカウンターの値に対応する変数countを宣言して、0で初期化します。「writable」記述は、このストアが書き込み可能であることを表します。
import { writable } from 'svelte/store';
// 書き込み可能なストア ...（1）
export const count = writable(0);
countストアを参照してカウンター値を表示するコンポーネントの<script>部はリスト2の通りです。
<script lang="ts">
import { count } from '$lib/store';
import { onMount } from 'svelte';
// 画面に表示するカウンター ...（1）
let countValue: number;
onMount(() => {
// マウント時、countの値を常に取得するようサブスクライブする処理 ...（2）
// サブスクライブを解除（アンサブスクライブ）する関数が戻る
const unsubscribe = count.subscribe(value => {
countValue = value;
});
return () => {
// アンマウント時、アンサブスクライブする処理 ...（3）
unsubscribe();
};
});
</script>
画面に実際に表示されるカウンターは（1）のcountValue変数です。onMount関数内では、まずコンポーネントのマウント（表示）時に（2）のcount.subscribeメソッドでcountストアをサブスクライブ（購読）して、countValueにカウンターの値を常に反映するようにします。
また、countストアをアンサブスクライブ（購読解除）する関数がcount.suscribeメソッドの戻り値として返却されるので、コンポーネントのアンマウント（非表示）時に（3）の通りunsubscribe関数を実行してアンサブスクライブするようにします。
一方、countストアを変更するコンポーネントの<script>部はリスト3の通りです。
<script>
import { count } from '$lib/store';
// カウントアップ ...（1）
const increment = () => {
count.update(n => n + 1);
};
// リセット ...（2）
const reset = () => {
count.set(0);
};
</script>
カウントアップボタンのクリック時に実行される（1）のincrement関数では、countストアのupdateメソッドで、ストアの値を1加算します。updateメソッドには、ストアの値を変更する関数を渡します（「n => n + 1」は、引数に1を加算して返却する関数を表します）。リセットボタンのクリック時に実行される（2）のreset関数では、countストアのsetメソッドで、ストアの値を0に設定します。
