Vueベースのフレームワーク「Nuxt 4.3」までの大きな変更点──コンポーザブルやコンポーネント

【最新Nuxtアップデート解説】Nuxtの変更点まとめ 第2回

実行を1回に限定できるcallOnce

　次に紹介するのは、処理の実行を1回だけに制限できるcallOnce()コンポーザブルです。

引数アロー関数を1回だけ実行

　callOnce()は、バージョン3.9で導入されたコンポーザブルであり、リスト3のように使います。

［リスト3］no02/once/app/app.vue

<script setup lang="ts">
const timestampState = useState<Date>("appTimestamp");  // (1)
callOnce(
  () => {  // (2)
    timestampState.value = new Date();  // (3)
  }
);
</script>

　リスト3の（2）のように、引数としてアロー関数を定義します。すると、このコンポーネントがサーバサイドでレンダリングされる初回のみ、アロー関数内のコードが実行されます。

　このcallOnce()には、戻り値があるわけではありませんし、ハイドレーションしていない状態を想定しています。そのためアロー関数内のコードとしては、非同期で取得・生成したデータをログに記録したり、ステートに格納したりすることを想定しています。

　リスト3では、（1）で用意したステートのappTimestampに、（3）でその時点での日時データを格納するようにしています。

　すると、このコンポーネントがサーバサイドでレンダリングされたその時点の日時がステートに格納され、それ以降このコンポーネントを何回表示させたとしても、最初に格納した日時データのみ保持し、上書きされることはありません。試しに、appTimestampをさまざまな画面で表示させたとしても、その値は変わりません。

ナビゲーションモードの追加

　このcallOnce()に対して、バージョン3.15で、ナビゲーションモードが追加されました。この機能により、クライアントサイドでのナビゲーションのたびに特定の処理を実行できるようになります。

　ナビゲーションモードを使用するには、リスト4の（1）のように、callOnce()の第2引数オブジェクトのmodeプロパティにnavigationを指定します。

［リスト4］no02/once/app/app.vue

callOnce(
  () => {
    timestampStateNavi.value = new Date();
  },
  { mode: "navigation" }  // (1)
);

　ナビゲーションモードは、以下のように動作します。

• サーバーサイド：最初のレンダリング時に一度だけ実行されます。
• クライアントサイド：このオプションを指定すると、クライアントサイドのナビゲーション（例：ページ遷移）が行われるたびに、アロー関数内のコードが実行されます。

　上記の例では、ステートtimestampStateNaviにその時点の日時を格納するコードが記述されています。ナビゲーションモードをnavigationに設定することで、このページへ遷移するたびに、ステートtimestampStateNaviが最新の日時データで上書きされるようになります。

　これにより、アプリケーション内でページ遷移ごとに動的にデータや状態を更新したい場合に、callOnce()をより柔軟に活用できるようになります。