svelte/storeについてのまとめ - 前編

はじめに

svelte/storeについてのまとめを作りたかった
今回はwritable Auto-subscribe readableについて

使ったもの

• Vite + SvelteKit + Typescript
• skelton

writable

書き込み可能な状態を表す。
subscribe update setのメソッドが使えるようになる。

subscribe: 状態が変化したときに反応するメソッド。
update: 状態を今の状態から変化させたいときに使用するメソッド。
set: 固定値に変化させたいときに使うメソッド。

// src/store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// src/routes/+page.svelte
<script lang="ts">
	import { count } from "../../store";

	let countValue = 0;
	count.subscribe(value => {
		countValue = value;
	})

	const increase = () => {
		count.update(n => n + 1);
	}

	const decrease = () => {
		count.update(n => n - 1);
	}

	const reset = () => {
		count.set(0)
	}
</script>

<div>現在: {countValue}</div>
<div style="display: flex;">
	<button on:click={increase}>＋</button>
	<button on:click={decrease}>ー</button>
	<button on:click={reset}>リセット</button>
</div>

<style>
    button {
        width: fit-content;
    }
</style>

Auto-subscription

実はsubscribeは一度実行するとunsubscribeを実行するまでは、そのコンポーネントが表示されなくてもずっと追ってしまい、メモリリークにつながってしまう。

$をつけることで自動でサブスクリプションしてくれる

// src/store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// src/routes/+page.svelte
<script lang="ts">
	import { count } from "../../store";

	const increase = () => {
		count.update(n => n + 1);
	}

	const decrease = () => {
		count.update(n => n - 1);
	}

	const reset = () => {
		count.set(0)
	}
</script>

<div>現在: {$count}</div>
<div style="display: flex;">
	<button on:click={increase}>＋</button>
	<button on:click={decrease}>ー</button>
	<button on:click={reset}>リセット</button>
</div>

<style>
	button {
		width: fit-content;
	}
</style>

readable

ユーザーが外部から定義してはいけないものはreadableを使い、読み込み専用にする。
例えば、タイマーや、マウス位置、時間など。

先ほどのカウンターを1秒ごとに1増えるようなものにしてみる。

// src/store.js
import { readable } from 'svelte/store';

export const count = readable(0, (set) => {
  let c = 1
  const interval = setInterval(() => {
		set(c);
    c++
	}, 1000);

	return function stop() {
		clearInterval(interval);
	};
});

// src/routes/+page.svelte
<script lang="ts">
	import { count } from "../../store";
</script>

<div>現在: {$count}</div>

次回はderivered custom bindingについてまとめます。

追記

後編上げました