iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1
Modern Web

前端工程的另一個選擇 Svelte 系列 第 19

DAY19- 可以寫入的store

writable store 是甚麼

writable store 是甚麼呢,在介紹完readable store後,今天要來跟大家分享的就是 writable store 這個東西,相較於readable store唯讀的store, writable store 是可以讓元件寫入、更新的 store,接下來在說明一下甚麼時候用跟如何用。

本文同步放置於此

writable store 甚麼時候用

writable store 的使用時機就是在於有許多元件會去更新那個資料,然後有另外些元件會讀取該資料時使用,簡單舉個例子就是登入後會更新使用者資訊,登出後會清除使用者資訊,還有部分地區會接露目前登入的使用者資料。

writable store 怎麼用

如同readable store, writable store 也是宣告在js之中,所以我們先寫一個使用者名稱的 writable store ,相關內容如下。

// In stores.js
import {writable} from 'svelte/store';
 
export const nameStore = writable('Login');

接下來我們在App.svelte內import這個nameStore進來並使用,例子如下所示。

<script>
import {nameStore} from './store.js';
</script>

<div>
Hello {$nameStore}
</div>

然後我們再加上另外一個元件專門更新nameStore,內容如下列所示。

<script>
import {nameStore} from './store.js';
</script>

<input type="text" bind:value={$nameStore} />

如此當nameStore被更新時,App.svelte的顯示也會一同更新,這個東西是不是很方便呢,最後說明一下writable這方法第一個參數是初始值,第二個參數是callback函式,裡面要實作一個set的方法跟回傳一個update的callback方法。

小結

在今天跟大家分享一下 svelte store 相關文章的第二篇 writable store 相關知識,希望大家能夠有所收穫。


上一篇
DAY18- 唯讀的store
下一篇
DAY20- 衍生的store
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言