【nuxt3】useAsyncDataで再読み込みする

この記事の環境

    "nuxt": "^3.8.0"

結論

refresh()を使います！

使い方

ドキュメントにも言及はあります。useAsyncData

以下はこのサイトのページネーションのページ数を割り出す箇所なのですが、記事数をカウントするためにuseAsyncDataを使っています。

const { data: pages,refresh } = await useAsyncData(
    'pages', async () => {
        const count = await queryContent('/' + category).where({ publish: true }).count();
        return Math.ceil(count / perPage)
    }
)

上記のポイントは、返り値にrefreshを含めているところです。

これで、以後refresh()として呼びだせば値が再読み込みされます。

一度読み込んだ値で固定されて困っていたところ発見しました。便利ですね！