リッチペイロードのサポート
本連載は、Nuxtの変更点を紹介する連載です。今回は、バージョン3.1から4.3までの変更点のうち、コンポーザブルやコンポーネントに注目し、変更されたものや新たに追加されたものをいくつか紹介します。その前に、前回の続きの内容を先に紹介します。
なお、本連載のサンプルデータは、GitHubから参照できます。
前回、データ取得コンポーザブルの変更点を紹介しました。こういったデータ取得コンポーザブルのデータ取得先として、別サーバで動作しているAPIを利用する場合もありますが、同一Nuxtアプリケーションのサーバ機能を利用する場合もあります。そうしたサーバ機能が送信するデータ形式のひとつであるJSONに関して、拡張したものが利用できるようにバージョン3.4でアップデートされています。
通常のJSON.stringify()がサポートしているデータ形式に加えて、正規表現やDateオブジェクト、BigIntなどの各種JavaScriptのデータ形式も正しくJSON形式へと変換されます。さらに、RefなどのNuxt/Vueオブジェクトも変換されます。これを、リッチペイロードのサポートと言います。
なお、このアップデートは、3.4段階では実験的なものでしたが、3.5で正式リリースとなっています。
プレビューモードを実現するusePreviewMode
さて、今回の本来のテーマである、コンポーザブルとコンポーネントに話を移していきます。最初に紹介するのは、usePreviewMode()コンポーザブルです。
プレビューモードでの表示切り替えが可能
usePreviewMode()は、バージョン3.11で導入されたコンポーザブルであり、その名称通りプレビューモードを実現するものです。プレビューモードとは、主に開発者など、そのモードへの切り替え方法を知っているもののみが確認できる画面などの状態を表します。
例えば、あるページコンポーネントにリスト1のコードを記述したとします。
<script setup lang="ts">
const { enabled } = usePreviewMode(); // (1)
const timestamp = ref("まだ");
const { data } = await useFetch<any>( // (2)
"/api/getTimestamp",
{
key: "timestampWithKey"
}
);
timestamp.value = data.value.timestamp;
</script>
<template>
<p>{{ timestamp }}</p>
<p v-if="enabled">現在プレビューモードです。</p> // (3)
</template>
ポイントは、（1）のusePreviewMode()の戻り値オブジェクトのenabledプロパティです。このアプリケーションへのアクセスがプレビューモードの場合、このenabledプロパティにtrueが格納されます。これを利用して、（3）のように、プレビューモードの場合にのみ表示される部分をコーディングしておくことが可能となります。
プレビューモードではキャッシュを利用しない
プレビューモードには、もうひとつ重要な特徴があります。それは、データ取得コンポーザブルにおけるキャッシュの無効化です。
リスト1の（2）のコードは、前回のリスト2、および、リスト3のコードと同じで、同一のキー文字列で取得したデータをページ間でキャッシュとして再利用します。
しかし、プレビューモードが有効な場合は、このキャッシュメカニズムが無効になります。その結果、常に最新のデータがサーバから取得されるため、開発者はキャッシュの影響を受けずに画面表示を確認できます。
プレビューモードの実現と解除
では、どのようにしてプレビューモードを実現するかというと、クエリパラメータpreviewにtrueを指定することです。一番簡単な方法は、次のようにURLの末尾にパラメータをつけることです。
http://localhost:3000/?preview=true
一度この状態でアプリケーションにアクセスすると、それ以降はページをリロードしない限りは常にプレビューモードとしてリンク先を表示します。プレビューモードを解除する場合は、次のようにpreviewパラメータをfalseとしてアクセスします。
http://localhost:3000/?preview=false
あるいは、usePreviewMode()の戻り値オブジェクトのenabledにfalseを代入します。例えばリスト2では、（2）にプレビューモードを解除するボタンを配置し、そのボタンをクリックしたら（1）のようにenabledにfalseを代入することで、プレビューモードを解除するようにしています。
<script setup lang="ts">
const { enabled } = usePreviewMode();
const onPreviewOff = () => {
enabled.value = false; // (1)
};
</script>
<template>
<p v-if="enabled">
<button v-on:click="onPreviewOff">プレビューモードを解除</button> // (2)
</p>
</template>
