svelte教程（8）stores

有時，您将需要多個不相關的元件或正常的JavaScript子產品通路這些值。

在Svelte，我們通過store來做到這一點。store隻是一種對象，該對象具有一種subscribe方法，該方法允許在store的value發生變化時通知訂閱過的元件。

可寫 store

通過 writable 方法可以建立一個可寫store，傳入兩個參數value, start。

• value：初始值
• start：獲得第一個訂閱者時調用，擁有一個參數為set的回調。可以傳回一個stop方法，該方法在最後一個訂閱者退訂時執行。

import { writable } from 'svelte/store';

export const count = writable(0,(set)=>{
  console.log('subscribe count')
  set(100)
  return ()=>{
    console.log('clear count')
  }
});           

可讀store擁有三個方法：update 、set、subscribe。

• set: 設定value值。
• update: 更新value值，接受一個參數為value的方法，return一個新的value值。

function update(fn) {
   set(fn(value));
}           

• subscribe: 訂閱該store，接受一個參數為value的方法，用于獲得value值并進行處理。傳回值為一個退訂方法，執行該方法完成退訂。

<script>
  import { onDestroy } from "svelte";
  import { count } from "../stores";
  let count_value;
  const unsubscribe = count.subscribe(value => {
    count_value = value;
  });
  onDestroy(unsubscribe());
</script>

<h1>The count is {count_value}</h1>
<button
  on:click={() => {
    count.update(c => c - 1);
  }}>
  -
</button>
<button
  on:click={() => {
    count.update(c => c + 1);
  }}>
  +
</button>
<button
  on:click={() => {
    count.set(0);
  }}>
  reset
</button>
           

自動訂閱

使用$進行自動訂閱，自動訂閱的store将在元件銷毀時自動調用停止訂閱方法。

<script>
  import { onDestroy } from "svelte";
  import { count } from "../stores";
</script>

<h1>The count is {$count}</h1>
<button
  on:click={() => {
    count.update(c => c - 1);
  }}>
  -
</button>
<button
  on:click={() => {
    count.update(c => c + 1);
  }}>
  +
</button>
<button
  on:click={() => {
    count.set(0);
  }}>
  reset
</button>
           

隻讀store

隻讀store就是沒有暴露update、set方法的可寫store。

import {
  readable
} from 'svelte/store';

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

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

<script>
    import { time } from '../stores';

    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>           

派生store

您可以使用建立一個store，并且這個store基于其他一個或者多個store，可以使用派生store。

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

derived接受三個參數：

• stores：可以為一個store對象，或者為一個數組。
• fn：接受一個方法包含兩個參數values，set。如果stores為數組，values也為數組，如果stores為store對象，values為改store的value。如果沒有set參數，派生store的value為fn的傳回值，如果包含set參數可以使用set方法指定value值。
• initial_value：初始值（異步時使用）

綁定 store

如果store是可寫的（即它具有set方法），則可以綁定其值，就像可以綁定到本地元件一樣。

也可以通過直接指派将value寫進store。

<input bind:value={$count}>

<button on:click="{() => $count += 1}">
    + 1
</button>           

本教程的所有代碼均上傳到github有需要的同學可以參考

https://github.com/sullay/svelte-learn

。