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。