Nuxt3でComposableを使う際のTips

Transcript

1. Nuxt3でComposableを 使う際のTips hitochan777 2025/1/17@v-kansai
2. 大月 仁志 ソフトウェアエンジニア @製造業×IoTのベンチャー企業 • 業務 Nuxt/C#/Azure • 個人開発 Rust/Local-First • 趣味 ピアノ hitochan777 Who?
3. Composableを使っていますか? • 状態を持つロジックをカプセル化して再利用するための関数 • Nuxt3はuseFetch, useAsyncDataなど • 昨年Nuxt2→Nuxt3に移行したタイミングで一部Composableを活用 ◦ Vuetify3への移行が一番しんどかった ... 😭 https://ja.vuejs.org/guide/reusability/composables
4. Composable使用時にハマった点 を共有します
5. 複数のAPI呼び出しをラップしたい
6. 複数のWeb API呼び出しをラップしたい ・簡単のためフルネームを返す　 　　　　 composableを考える ・性と名はそれぞれ別でAPIを呼ぶ必要 　が ある ・待ち時間を入れて文字列を返すように　し てAPI呼び出しを擬似的に実現 本来ならuseFetchを使うのが自然と思いますが疑似 呼び出しのためuseAsyncData使っています
7. エラーになる Nuxtインスタンスにアクセスできない！ →リクエスト間の状態汚染を防ぐためにインスタンスをクリアしているため https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables
8. 解決策1: awaitを一個だけに留める Promise.allなどを活用して複数API呼び出しを一つのuseAsyncDataに集約する ・メリット：シンプル ・デメリット：API呼び出しに依存関係がある場合には使えない
9. 解決策2: コンテキスト内で実行するよう明示 runWithContextを使ってコンテキスト内で実行するよう明示する方法 ・メリット：APIに依存関係がある場合でも一部対応可能 ・デメリット 　・可読性の低下 　・asyncなcomposableがネストしているケースは対応できない
10. 解決策3: awaitしない useAsyncDataやuseFetchはawaitしなくても使えることを利用 ・メリット：APIに依存関係がある場合でも対応可能。ネストのケースも対応化。 ・デメリット 　・SSRの恩恵を受けられない 　・composableによってはawaitしなければならないものもあるかも
11. 解決策4: asyncContextオプションを有効化 • ネストされたcomposableでもコンテキストがアクセスできるオプション (experimental) • Node.jsのAsyncLocalStorageやそれに相当するモックを活用 • 私が実装した小さめのアプリでは問題なく動作 サーバーサイドは Node.js、ブラウザ側は Android Google Chrome、iOS Safari、Google Chrome (Windows) https://nuxt.com/docs/guide/going-further/experimental-features#asynccontext
12. どれがいいのか? https://nuxt.com/docs/guide/going-further/experimental-features#asynccontext • asyncContext以外の方法は片手落ち感あり • asyncContextが一番何も気にしなくてもいいので楽 • experimentalだがしっかり検証する前提であればありかも • 各プロジェクトの状況に応じて選択するのが良さそう ご清聴ありがとうございました！
13. 補足資料
14. インスタンスがクリアされる理由 (ざっくり) https://antfu.me/posts/async-with-composition-api https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables • 一時的なインスタンスをグローバル変数で管理する →この変数は全リクエストで共有される • composable実行中に別リクエストのタスクが実行される可能性がある • リクエスト間の状態汚染を防ぐために他のタスクが実行される前にインスタンスをクリアす る必要がある