Skip to main content

すべての store が、それらを参照しているものによって書き込み可能であるべきではありません。たとえば、マウスの位置やユーザーの地理的位置を表す store があり、それらの値を「外部」から設定できるのは意味がありません。そのような場合のために、読み取り可能な store があります。

stores.js を開いてください。readable の第1引数は初期値です。初期値がない場合は nullundefined をセットできます。第2引数は set コールバックを受け取り stop 関数を返す start 関数です。この start 関数は、store が最初のサブスクライバーを取得したときに呼び出されます。stop 関数は、最後のサブスクライバーがサブスクライブを解除したときに呼び出されます。

stores.js
export const time = readable(new Date(), function start(set) {
	const interval = setInterval(() => {
		set(new Date());
	}, 1000);

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

Next: Derived stores

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	import { time } from './stores.js';
 
	const formatter = new Intl.DateTimeFormat(
		'en',
		{
			hour12: true,
			hour: 'numeric',
			minute: '2-digit',
			second: '2-digit'
		}
	);
</script>
 
<h1>The time is {formatter.format($time)}</h1>
 
initialising