iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

derived store

derived store 是甚麼,在說明完writable storereadable store後要接著分享的svelte store系列文章就是derived store。

本文同步放置於此

derived store 是甚麼

derived store 簡單講就是由其他 store 衍生出來的資料內容,所以其用途就很明確,就是使用在當宣告一個store後有另一個store會因為前面一個store而產生的資料內容。

derived store 怎麼用

這部分可以用之前readable storetime例子再接續下去,首先我們先回顧之前的例子。

<!--App.svelte-->
<script>
    import { time, elapsed } 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>
<p>
	This page has been open for
	{$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
</p>

這裡我們新家一個需求,就是顯示一個經過多少秒的內容,當然直接跑會壞掉得,因為還沒實作elapsed

derived store 的實作

在實作elapsed之前先複習一下readable storetime,相關內容如下。

// stores.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);
    };
});

接下來我們要實作elapsed了,這時我們會用到derived這函式,而這函式也需要從svelte/store import進來,實作的內容如下。

// stores.js
import { readable, derived } from 'svelte/store';

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

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

const start = new Date();

export const elapsed = derived(
	time,
	$time => Math.round(($time - start) / 1000)
);

derived的第一個參數是參考的store物件,第二個參數是當參考的store變更時的callback,這邊是計算時間差,並取到秒。

小結

今天跟大家分享svelte store系列文章第三篇 derived store 希望大家會喜歡。


上一篇
DAY19- 可以寫入的store
下一篇
DAY21- 動態 tweened
系列文
前端工程的另一個選擇 Svelte 30

尚未有邦友留言

立即登入留言