记住状态

在浏览历史记录中导航时，Inertia 使用缓存的历史记录状态中的道具数据恢复页面。但是，Inertia 不会恢复本地页面组件状态，因为这超出了它的范围。这会导致浏览器历史记录中出现过时的页面。

例如，如果用户部分填写了一个表单，然后导航离开，然后再返回，表单将被重置，他们的工作将丢失。

为了缓解这个问题，您可以告诉 Inertia 在浏览器历史记录中保存哪些本地组件状态。

保存本地状态

要将本地组件状态保存到历史记录状态，请使用 remember 功能告诉 Inertia 它应该记住哪些数据。

import { useRemember } from '@inertiajs/vue3'

const form = useRemember({
  first_name: null,
  last_name: null,
})
使用 "useRemember" 钩子告诉 Inertia 它应该记住哪些数据。

现在，每当您的本地 form 状态发生变化时，Inertia 将自动将这些数据保存到历史记录状态，并且还会在历史记录导航时恢复它。

多个组件

如果您的页面包含多个使用 Inertia 提供的 remember 功能的组件，您需要为每个组件提供一个唯一的键，以便 Inertia 知道要将哪些数据恢复到每个组件。

import { useRemember } from '@inertiajs/vue3'

const form = useRemember({
  first_name: null,
  last_name: null,
}, 'Users/Create')
将键设置为 useRemember() 的第二个参数。

如果您在页面上有多个使用 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}`)
将动态键设置为 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')