Day6: Store 與 Context 介紹

本集內容：Store 與 Context 介紹

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

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

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day6 - Context 與 Store
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   本⽇⽬標
   認識 Svelte 當中 Store 與 Context 的⽤法
   

   View Slide

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

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   Store API
   可在元件外宣告，依功能分為 readable, writable, derived
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   writable
   可以透過 update 或 set 從外部修改 store 的值
   

   View Slide

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

   View Slide

7. 第 12 屆 IT 鐵⼈賽
   derived
   接收 1 ⾄多個 store 並且作加⼯
   

   View Slide

8. 第 12 屆 IT 鐵⼈賽
   .subscribe()
   所有的 svelte store 都有 subscribe ⽅法
   

   View Slide

9. 第 12 屆 IT 鐵⼈賽
   Svelte 整合 - $
   在變數前加入 $ 可以⾃動訂閱 store
   同時處理 unsubscribe 邏輯
   

   View Slide

10. 第 12 屆 IT 鐵⼈賽
    搭配 Rx 與 Svelte 整合！
    

    View Slide

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

    View Slide

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

    View Slide

13. 第 12 屆 IT 鐵⼈賽
    與 store 的不同之處
    沒有 reactive 效果（如 subscribe, unsubscribe）
    需要在 Svelte 元件中使⽤才有效果
    只會作⽤在 Svelte 的元件樹當中
    Svelte 會去找尋離元件距離最近的 context
    

    View Slide

14. 第 12 屆 IT 鐵⼈賽
    getContext, setContext
    

    View Slide