iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

readable store 初體驗

readable store 是甚麼呢?今天這篇就來分享一下甚麼是svelte的readable store,並且透過這一篇來替svelte的store展開序幕。

本文同步放置於此

store 是甚麼

相信讀者對於svelte的store應該很陌生,但是提到redux或是ngrx還是ngxs應該大家都很熟悉,所以簡單講svelte的store就是react的redux或是angular的ngrx或是ngxs。也就是將系統內的資料集中管理的一個工具,今天會先跟大家分享readable的store,所以接下來開始介紹。

readable store 是甚麼

既然store是集中管理資料的一個工具,readable store就是集中管理的資料,而且那個資料是不能被其他地方修改的。至於怎麼使用readable store下面有個例子。

readable store 的用法

相信大家都會想要做一個倒數計時器,或者是小時鐘的功能,所以這時候就會需要一個不段更新時間的計時器,這個通常大家都會想到Date,不過Date是娶得當下的時間,所以這邊需要做一個唯讀並且每秒更新的Date,這時就需要用到 readable store了。

readable store 怎麼寫

所以我們先要做一個 readable store 裡面放一個每秒更新一次的Date這個我們定義在store.js如下所示。

import { readable } from 'svelte/store';

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

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

這邊會用到svelte/storereadable的方法,其中第一個參數是readable store的初始值,第二個參數是一個需要set並回傳stop的方法,這是當這個readable的方法被註冊時會呼叫到,而其回傳的stop方法會在取消註冊時會被呼叫。

如何使用設定好的 readable store

在前面我們宣告了一個會每秒更新的readable store,接下來我們要來使用他,我們寫在App.svelte例子如下。

<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>

使用方法很簡單,首先先把寫好的time給import進來,接下來就是前面提到的$符號第二個用法,$time這樣就可以呼叫store物件,這邊是readable store待明天再跟其他的store做比較。

小結

今天跟大家分享一下 svelte 的 readable store 怎麼寫,接下來的幾天會跟大家分享一下 store 這東西。


上一篇
DAY17- 元件的生命週期
下一篇
DAY19- 可以寫入的store
系列文
前端工程的另一個選擇 Svelte 30

尚未有邦友留言

立即登入留言