Day6: Store 與 Context 介紹

9d7732f8bad970e853ce664588b204b0?s=47 Kalan
September 15, 2020

Day6: Store 與 Context 介紹

本集內容:Store 與 Context 介紹

Svelte 內建 store 機制,除了不用戰 redux 之外,store 本身的功能也很強大,透過 svelte 的 `$` 功能還可以達到方便取值的效果,也可以搭配其他函式庫如 Rx.js 做整合。

Store 也可以在 Svelte 元件外操作,方便切分業務邏輯。

9d7732f8bad970e853ce664588b204b0?s=128

Kalan

September 15, 2020
Tweet

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day6 - Context 與 Store
  2. 第 12 屆 IT 鐵⼈賽 本⽇⽬標 認識 Svelte 當中 Store

    與 Context 的⽤法
  3. 第 12 屆 IT 鐵⼈賽 什麼時候⽤ store 資料經常更動且可能會跨元件使⽤ 不想參雜太多業務邏輯在元件當中 想透過其他

    Library 達到 reactive 效果
  4. 第 12 屆 IT 鐵⼈賽 Store API 可在元件外宣告,依功能分為 readable, writable,

    derived
  5. 第 12 屆 IT 鐵⼈賽 writable 可以透過 update 或 set

    從外部修改 store 的值
  6. 第 12 屆 IT 鐵⼈賽 readable 只能從內部修改 store 的資料(e.g 聊天室)

  7. 第 12 屆 IT 鐵⼈賽 derived 接收 1 ⾄多個 store

    並且作加⼯
  8. 第 12 屆 IT 鐵⼈賽 .subscribe() 所有的 svelte store 都有

    subscribe ⽅法
  9. 第 12 屆 IT 鐵⼈賽 Svelte 整合 - $ 在變數前加入

    $ 可以⾃動訂閱 store 同時處理 unsubscribe 邏輯
  10. 第 12 屆 IT 鐵⼈賽 搭配 Rx 與 Svelte 整合!

  11. 第 12 屆 IT 鐵⼈賽 get 拿到 store 內的值

  12. 第 12 屆 IT 鐵⼈賽 什麼時候⽤ Context 資料幾乎不會變動(使⽤者資料、theme) 跨元件溝通時

  13. 第 12 屆 IT 鐵⼈賽 與 store 的不同之處 沒有 reactive

    效果(如 subscribe, unsubscribe) 需要在 Svelte 元件中使⽤才有效果 只會作⽤在 Svelte 的元件樹當中 Svelte 會去找尋離元件距離最近的 context
  14. 第 12 屆 IT 鐵⼈賽 getContext, setContext