状態の保持

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

例えば、ユーザーがフォームに入力を途中まで行った後、離れてから戻ってきた場合、フォームはリセットされ、入力内容は失われます。

この問題を軽減するために、Inertia にブラウザの履歴に保存するローカルコンポーネントの状態を指定することができます。

ローカル状態の保存

ローカルコンポーネントの状態を履歴状態に保存するには、remember機能を使用して、Inertia がどのデータを記憶すべきかを指定します。

import { useRemember } from '@inertiajs/vue3'

const form = useRemember({
  first_name: null,
  last_name: null,
})

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

複数のコンポーネント

Inertia が提供するremember機能を使用する複数のコンポーネントがページに含まれている場合、Inertia が各コンポーネントにどのデータを復元するべきかを認識するために、各コンポーネントに一意のキーを指定する必要があります。

import { useRemember } from '@inertiajs/vue3'

const form = useRemember({
  first_name: null,
  last_name: null,
}, 'Users/Create')

remember機能を使用する同じコンポーネントがページ上に複数存在する場合、モデル識別子など、各コンポーネントインスタンスに一意のキーを含めるようにしてください。

import { useRemember } from '@inertiajs/vue3'

const props = defineProps({ user: Object })

const form = useRemember({
  first_name: null,
  last_name: null,
}, `Users/Edit:${props.user.id}`)

フォームヘルパー

Inertia フォームヘルパーを使用している場合、フォームをインスタンス化するときに、一意のフォームキーを最初の引数として渡すことができます。これにより、フォームデータとエラーが自動的に記憶されます。

import { useForm } from '@inertiajs/vue3'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${props.user.id}`, data)

状態の手動保存

Vue 2 のrememberプロパティと、Vue 3、React、Svelte のuseRememberフックは、データの変更を監視し、それらの変更を履歴状態に自動的に保存します。その後、Inertia はページロード時にデータを復元します。

しかし、Inertia の基礎となるremember()と restore()メソッドを使用して、手動で管理することも可能です。

import { router } from '@inertiajs/vue3'

// Save local component state to history state...
router.remember(data, 'my-key')

// Restore local component state from history state...
let data = router.restore('my-key')