Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt3でComposableを使う際のTips
Search
Hitoshi Otsuki
January 17, 2025
0
120
Nuxt3でComposableを使う際のTips
Hitoshi Otsuki
January 17, 2025
Tweet
Share
Featured
See All Featured
A better future with KSS
kneath
240
18k
How GitHub (no longer) Works
holman
316
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
11
950
4 Signs Your Business is Dying
shpigford
186
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.8k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
RailsConf 2023
tenderlove
30
1.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
8
1.2k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Transcript
Nuxt3でComposableを 使う際のTips hitochan777 2025/1/17@v-kansai
大月 仁志 ソフトウェアエンジニア @製造業×IoTのベンチャー企業 • 業務 Nuxt/C#/Azure • 個人開発 Rust/Local-First
• 趣味 ピアノ hitochan777 Who?
Composableを使っていますか? • 状態を持つロジックをカプセル化して再利用するための関数 • Nuxt3はuseFetch, useAsyncDataなど • 昨年Nuxt2→Nuxt3に移行したタイミングで一部Composableを活用 ◦ Vuetify3への移行が一番しんどかった
... 😭 https://ja.vuejs.org/guide/reusability/composables
Composable使用時にハマった点 を共有します
複数のAPI呼び出しをラップしたい
複数のWeb API呼び出しをラップしたい ・簡単のためフルネームを返す composableを考える ・性と名はそれぞれ別でAPIを呼ぶ必要 が ある ・待ち時間を入れて文字列を返すように し てAPI呼び出しを擬似的に実現
本来ならuseFetchを使うのが自然と思いますが疑似 呼び出しのためuseAsyncData使っています
エラーになる Nuxtインスタンスにアクセスできない! →リクエスト間の状態汚染を防ぐためにインスタンスをクリアしているため https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables
解決策1: awaitを一個だけに留める Promise.allなどを活用して複数API呼び出しを一つのuseAsyncDataに集約する ・メリット:シンプル ・デメリット:API呼び出しに依存関係がある場合には使えない
解決策2: コンテキスト内で実行するよう明示 runWithContextを使ってコンテキスト内で実行するよう明示する方法 ・メリット:APIに依存関係がある場合でも一部対応可能 ・デメリット ・可読性の低下 ・asyncなcomposableがネストしているケースは対応できない
解決策3: awaitしない useAsyncDataやuseFetchはawaitしなくても使えることを利用 ・メリット:APIに依存関係がある場合でも対応可能。ネストのケースも対応化。 ・デメリット ・SSRの恩恵を受けられない ・composableによってはawaitしなければならないものもあるかも
解決策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
どれがいいのか? https://nuxt.com/docs/guide/going-further/experimental-features#asynccontext • asyncContext以外の方法は片手落ち感あり • asyncContextが一番何も気にしなくてもいいので楽 • experimentalだがしっかり検証する前提であればありかも • 各プロジェクトの状況に応じて選択するのが良さそう
ご清聴ありがとうございました!
補足資料
インスタンスがクリアされる理由 (ざっくり) https://antfu.me/posts/async-with-composition-api https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables • 一時的なインスタンスをグローバル変数で管理する →この変数は全リクエストで共有される • composable実行中に別リクエストのタスクが実行される可能性がある •
リクエスト間の状態汚染を防ぐために他のタスクが実行される前にインスタンスをクリアす る必要がある