useFetch を使用してキャッシュされたデータを Nuxt3 に保持する

Question

nuxt3 を使用しているときに次の問題が発生しました。

• 動的ページ[slug].vue初期スラッグデータを正しくロードします
• ページを離れて戻ってくると、新しいデータは読み込まれず、代わりに古いデータが表示されたままになります。
• 上記のページを古いデータで更新すると、正常に動作します。

これは、新しいスラッグの API 呼び出しが行われないために発生するようです。

私の [slug.vue] ファイルは次のようになります:

リーリー

セットアップ全体は stackblitz で確認できます: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages/[slug].vue,pages/index.vue

Answer 1

デフォルトでは、useFetch、useLazyFetch、useAsyncData、および useLazyAsyncData はすべて、現在のブラウザー セッションで最初にフェッチされた初期応答ペイロードをキャッシュするため、その後の無駄な要求は行われません。 (少なくとも、それがその背後にある考えだと思います)

オプション「initialCache」を渡して「false」に設定することで、各フェッチ コンポーザブルのデフォルトの動作を変更できます。

参照: https://v3.nuxtjs.org/api /composables/use-async-data#params

Answer 2

上記のコメントの提案に従い、ここでドキュメントを確認してください: https://v3.nuxtjs.org/guide/features/data-fetching/#refreshing-data次のことを試しましたが、うまくいきましたコード＃＃＃ リーリー

ここでの実際の例:

https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages/[slug].vue,app.vue