在 Nuxt3 中除了可導入 Pinia 外，nuxt 也原生提供 useState，無需額外安裝其他套件 。useState 對 SSR 友善，可有效避免 server 端和 client 端間形成的 Hydration text content mismatch 問題。
內容
以下面的情境為例：
1. 製作一登入頁，並在驗證成功後跳轉
2. 進入各頁面前，需經由 middleware 檢查權限
3. 側邊欄需根據登入狀態動態產生可前往的路由
4. Header 和側邊欄各自抽離成 2 個 Component，放置於 layout 資料夾中以利共用
props/emit 架構繁瑣不易維護；Pinia 在 Nuxt 系統端與客戶端執行時，會有機會產生 Hydration text content mismatch 問題。這時若用 useState，只要宣告的 key 不重複，那就可以在 layout、components、composable、middleware、pages 間共享狀態，也不容易有 mismatch 問題
程式碼
相關資料
1. Nuxt 3 開發心得 — 比較 Pinia、useState
按讚加入粉絲團
