第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY18- 唯讀的store

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 這東西。

發佈留言

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