状態の記憶

ブラウザ履歴を操作する際、Inertia は履歴状態にキャッシュされたプロップデータを使ってページを復元します。しかし、Inertia はローカルのページコンポーネント状態まで復元することはできません。そのため、ブラウザ履歴に古い状態のページが残る可能性があります。

例えば、ユーザーがフォームの一部を入力した後に別ページへ移動し、再び戻ってきた場合、フォームはリセットされ、入力した内容は失われます。

この問題を回避するには、Inertia にブラウザ履歴に保存すべきローカルコンポーネントの状態を教えることができます。

ローカル状態の保存

ローカルコンポーネントの状態を履歴状態に保存するには、useRemember を使って Inertia にどのデータを記憶させるかを指定します。

これで、ローカルの form 状態が変更されるたびに、Inertia は自動的にこのデータを履歴状態に保存し、履歴操作時に復元します。

複数コンポーネント

ページに複数の Inertia の remember 機能を使用するコンポーネントがある場合、各コンポーネントに固有のキーを指定する必要があります。これにより、Inertia はどのデータをどのコンポーネントに復元するかを識別できます。

同じコンポーネントが複数インスタンス存在する場合は、モデルの ID などを使って各インスタンスにも固有のキーを指定してください。

フォームヘルパー

Inertia フォームヘルパー を使用している場合、フォームを作成するときに一意のフォームキーを第一引数として渡すことで、フォームデータやエラーを自動的に記憶させることができます。

dontRemember() メソッドを使うと、特定のフィールドを記憶させないようにできます。パスワードのような履歴状態に保存したくない機密フィールドで便利です。

手動で状態を保存する

useRemember フックはデータの変更を監視し、自動的に履歴状態に保存します。そして Inertia はページロード時にデータを復元します。

しかし、Inertia が提供する remember() と restore() メソッドを使って手動で管理することも可能です。