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/store的readable的方法，其中第一個參數是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 這東西。