実行を1回に限定できるcallOnce
次に紹介するのは、処理の実行を1回だけに制限できるcallOnce()コンポーザブルです。
引数アロー関数を1回だけ実行
callOnce()は、バージョン3.9で導入されたコンポーザブルであり、リスト3のように使います。
<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を指定します。
callOnce(
() => {
timestampStateNavi.value = new Date();
},
{ mode: "navigation" } // (1)
);
ナビゲーションモードは、以下のように動作します。
- サーバーサイド：最初のレンダリング時に一度だけ実行されます。
- クライアントサイド：このオプションを指定すると、クライアントサイドのナビゲーション（例：ページ遷移）が行われるたびに、アロー関数内のコードが実行されます。
上記の例では、ステートtimestampStateNaviにその時点の日時を格納するコードが記述されています。ナビゲーションモードをnavigationに設定することで、このページへ遷移するたびに、ステートtimestampStateNaviが最新の日時データで上書きされるようになります。
これにより、アプリケーション内でページ遷移ごとに動的にデータや状態を更新したい場合に、callOnce()をより柔軟に活用できるようになります。
