記住狀態

當瀏覽器歷史記錄導覽時，Inertia 會使用快取在歷史狀態中的 props 資料來還原頁面。但是，Inertia 不會還原本地頁面元件狀態，因為這超出了它的範圍。這可能會導致瀏覽器歷史記錄中的頁面過時。

例如，如果使用者部分填寫表單，然後離開，然後返回，表單將會重設，他們的工作將會遺失。

為了緩解此問題，您可以告訴 Inertia 要將哪些本地元件狀態儲存在瀏覽器歷史記錄中。

儲存本地狀態

若要將本地元件狀態儲存到歷史狀態，請使用 remember 功能來告知 Inertia 應記住哪些資料。

import { useRemember } from '@inertiajs/vue3'

const form = useRemember({
  first_name: null,
  last_name: null,
})
使用「useRemember」鉤子來告訴 Inertia 應記住哪些資料。

現在，每當您的本地 form 狀態變更時，Inertia 都會自動將此資料儲存到歷史狀態，並在歷史導覽時還原它。

多個元件

如果您的頁面包含多個使用 Inertia 提供的記住功能的元件，您需要為每個元件提供唯一的鍵，以便 Inertia 知道要將哪些資料還原到每個元件。

import { useRemember } from '@inertiajs/vue3'

const form = useRemember({
  first_name: null,
  last_name: null,
}, 'Users/Create')
將鍵設為 useRemember() 的第二個引數。

如果您的頁面上有多個使用記住功能的相同元件的實例，請務必也包含每個元件實例的唯一鍵，例如模型識別碼。

import { useRemember } from '@inertiajs/vue3'

const props = defineProps({ user: Object })

const form = useRemember({
  first_name: null,
  last_name: null,
}, `Users/Edit:${props.user.id}`)
將動態鍵設為 useRemember() 的第二個引數。

表單輔助工具

如果您正在使用 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')