Состояние запоминания

При навигации по истории браузера Inertia восстанавливает страницы, используя данные, кэшированные в истории. Однако Inertia не восстанавливает состояние компонента локальной страницы, поскольку это недоступно. Это может привести к появлению устаревших страниц в истории Вашего браузера.

Например, если пользователь частично заполняет форму, затем уходит, а затем возвращается обратно, форма будет сброшена, и его работа будет потеряна.

Чтобы смягчить эту проблему, Вы можете указать Inertia, какое состояние локального компонента следует сохранить в истории браузера.

Сохранение локального состояния

To save local component state to the history state, use the remember feature to tell Inertia which data it should remember.

import { useRemember } from '@inertiajs/inertia-vue3'

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

    return { form }
  },
}

Use the "useRemember" hook.

Теперь, когда Ваша локальная форма form изменяется, Inertia автоматически сохраняет эти данные в состояние истории и восстанавливает их при навигации по истории.

Мульти компоненты

Если Ваша страница содержит несколько компонентов, которые используют функцию запоминания, Вам необходимо предоставить уникальный ключ для каждого компонента, чтобы Inertia знала, какие данные нужно восстановить для каждого компонента.

import { useRemember } from '@inertiajs/inertia-vue3'

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

    return { form }
  },
}

Установите ключ в качестве второго аргумента useRemember().

Если у Вас есть несколько экземпляров одного и того же компонента на странице, использующей функцию запоминания, не забудьте также включить уникальный ключ для каждого экземпляра компонента.

import { useRemember } from '@inertiajs/inertia-vue3'

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

    return { form }
  },
}

Установите динамический ключ в качестве второго аргумента useRemember().

Помощник формы

Если вы используете помощник формы, Вы можете передать уникальный ключ формы в качестве первого аргумента при создании экземпляра формы, и это приведет к тому, что данные формы и ошибки автоматически запоминаются.

import { useForm } from '@inertiajs/inertia-vue3'

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

Сохранение состояния вручную

Свойство remember во Vue 2 и хук useRemember во Vue 3, React и Svelte следят за изменениями данных и автоматически сохраняют эти изменения в состоянии истории, а затем восстанавливают его при загрузке страницы.

Однако можно также управлять этим вручную, используя базовые методы remember() и restore() в Inertia.

import { Inertia } from '@inertiajs/inertia'

// Сохранить состояние локального компонента в состояние истории
Inertia.remember(data, 'my-key')

// Восстановить состояние локального компонента из состояния истории
let data = Inertia.restore('my-key')

На этой странице