第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY20- 衍生的store

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 希望大家會喜歡。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *