Nuxt3のuseFetch()で2回目以降のapiがスルーされる問題 ←こういう事象があるらしい・・・

nuxtについて色々調べている時に見つけた情報。
備忘的に参考サイトを残しておく。

＜参考サイト＞

useFetch()を使用して「server/api」以下にリクエストしている場合

2回目以降のクリックアクションでapiリクエストがスルーされる事象が発生

1回目のカートに入れるボタンは正常に動きます。
が、2回目のクリック時はapiリクエストが無視され、いきなりthen()に処理が移っています。

キャッシュが原因。useAsyncData()を使おう

上記の問題はuseFetch()が内部で行っているキャッシュが原因で、2回目以降の処理をスルーします。
キャッシュを無効にするオプションはuseAsyncData()にしか用意されていません。
そこで、useAsyncData()のキャッシュ無効オプションを付与してuseFetch()を書き換えます。

initialCache ... falseに設定すると、最初のフェッチでペイロードキャッシュをスキップする。(デフォルトはtrue)
参考: Nuxt 3 - useAsyncData