相比於使用 Vite 靜態多頁面輸出,利用 Nuxt3 來達成同樣的效果可簡化不少心力,但需注意切換頁面的同時,載入的 Pinia Store 是不會重置回預設值的。這邊筆記下自動觸發重置的方法。
內容
條件
1. Store 用 Option 的方式定義可利用原生提供的 $reset 來重設。如用 Composition 的方法定義,那就得自行撰寫 reset 方法
2. 每一頁面進入前,指定一個檢查的 middleware,便可確保一定會觸發
邏輯
1. 撰寫一個 useStoreReset,用來儲存已生成的 Store 實例,並提供 register 和 resetAll 方法。
2. 寫一個自訂的 piniaReset Nuxt Plugin。這樣當 Nuxt3 啟用時,就會自動註冊並載入。
由於 @pinia/nuxt 所提供的 TS 支援沒有包含到 nuxtApp 的 $pinia (當其實是有值的),就用 as 強制帶入
3. 在自訂檢查的 middleware 中使用
程式碼
參考資料
1. Plugins – Pinia
2. Defining a Store – Pinia