こんにちは。
野中康生です。
Piniaには、HMR(Hot Module Replacement)という機能が備わっているのですが、これが結構便利なので使っています。
HMRとは何か？
HMRとは、ブラウザの全ページリロードをせずに、更新したモジュールだけをリロードする機能のことです。PiniaのHMRは、状態を持つstoreが更新されたときに、そのstoreだけをリロードする機能が提供されています。これによって、アプリケーション全体をリロードすることなくstoreの更新を素早く確認することができます。
Piniaを使ったHMRの実装例
Piniaを使ってHMRは以下のように実装できます。
|
1 2 3 4 5 6 7 8 |
const usehogeStore = defineStore('hoge', { // store詳細 }) if (import.meta.hot) { import.meta.hot.accept(acceptHMRUpdate(usehogeStore, import.meta.hot)) } |
公式サイトでは、defineStore, acceptHMRUpdateをインポートしていますが、Nuxt3のautoImportsオプションを使えば、ファイルごとにインポートしなくても使うことができて便利です。
|
1 2 3 4 5 6 7 8 9 10 |
// nuxt.config.ts modules: [ [ '@pinia/nuxt', { autoImports: ['defineStore', 'acceptHMRUpdate'], }, ], ], |
参考
Intuitive, type safe, light and flexible Store for Vue…
