前言
前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情,但這些元件中的狀態要怎麼去管理呢?讓我們進入全域狀態管理的世界。
在不同組件之間傳遞狀態
在一些 UI 框架中會提供創建 context
的方式來管理狀態,但由於 Astro 採用「局部 Hydration」的方式來渲染頁面,因此無法辦到。
因此 Astro 推薦的解方是:Nano Stores。
為什麼是 Nano Stores?
- 它很小(1 KB 不到)。
- 與框架無關,可以用它來整合各元件各框架之間的狀態。
什麼?又一個新的框架要學?就我簡單體驗與其他狀態管理並沒有太大的差異,只需要對 JavaScript 有基礎的了解很快就能上手,以下是一個小範例展示如何在 Vue 與 React 之間傳遞管理狀態。
計數器小範例
定義問題
目前有兩個計數器元件: CounterVue.vue
與 CounterReact.jsx
希望藉由導入 Nano Stores 讓這兩個元件之間的狀態可以互通。
第一步:安裝對應套件
第一步:創建 Store
創建一個 stores
資料夾並且添加 counter.js
檔案,透過 atom 這個函式的幫助,我們能將狀態紀錄於其中並且輸出並在其他元件中引用。
第二步:撰寫個別元件
第三步:引入元件
如此一來兩個不同框架的狀態與方法也能很好的配合在一起。
其他替代方案?
可以考慮一些「簡單」的方法,向是透過「客製化瀏覽器事件」讓元件之間彼此溝通,或是依賴各框架提供的解方:
總結
今天的範例展示了 Astro 中是如何處理不同框架間的狀態。在寫靜態內容為主的網站時,通常也比較少機會會需要寫到太複雜的客戶端狀態管理,很高興有套件可以簡單整合這件事情。
延伸閱讀
- Share State Between Islands - Astro DOCS
- The easiest way to handle app state - Awesome
- Simpler ReactJS global state Nano Stores - bholmesdev
- Day11 - 全域狀態管理 - 相同文章同步發布於 iThome 鐵人賽中
2023 iThome 鐵人賽 - Astro 系列
- Astro 系列文第三十日:系列回顧與反省
- Astro 系列文第二十九日:製作作品集參考
- Astro 系列文第二十八日:近期與資源雜談
- Astro 系列文第二十七日:視圖過度
- Astro 系列文第二十六日:建構網頁概念篇
- Astro 系列文第二十五日:基礎指令與設定
- Astro 系列文第二十四日:添加 ESLint 與 Prettier
- Astro 系列文第二十三日:路徑別名
- Astro 系列文第二十二日:環境變數
- Astro 系列文第二十一日:部屬升空
- Astro 系列文第二十日:實作搜尋功能
- Astro 系列文第十九日:RSS 端點
- Astro 系列文第十八日:實作集合分類功能
- Astro 系列文第十七日:頁籤
- Astro 系列文第十六日:內容集合
- Astro 系列文第十五日:基礎布局
- Astro 系列文第十四日:圖片最佳化
- Astro 系列文第十三日:Markdown 與 MDX
- Astro 系列文第十二日:基礎路由
- Astro 系列文第十一日:全域狀態管理
- Astro 系列文第十日:整合 UI 框架
- Astro 系列文第九日:腳本
- Astro 系列文第八日:實作整合 Tailwind
- Astro 系列文第七日:實作按鈕元件
- Astro 系列文第六日:樣式
- Astro 系列文第五日:基礎元件
- Astro 系列文第四日:基礎指令與設定
- Astro 系列文第三日:建構新專案
- Astro 系列文第二日:現有問題與解方
- Astro 系列文第一日:起飛前置準備