derived store

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

derived store 是甚麼

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

derived store 怎麼用

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

<!--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 store的 time ，相關內容如下。

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