Ghi nhớ state

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

Khi điều hướng lịch sử trình duyệt, Inertia khôi phục các trang bằng dữ liệu props được cache trong history state. Tuy nhiên, Inertia không khôi phục state cục bộ của page component vì phần này nằm ngoài phạm vi quản lý của nó. Điều này có thể khiến các trang trong lịch sử trình duyệt trở nên lỗi thời. Ví dụ, nếu người dùng mới điền một phần form rồi điều hướng sang nơi khác và sau đó quay lại, form sẽ bị reset và phần dữ liệu họ đã nhập sẽ mất. Để giảm thiểu vấn đề này, bạn có thể cho Inertia biết state cục bộ nào của component cần được lưu vào lịch sử trình duyệt.

Lưu state cục bộ

Để lưu state cục bộ của component vào history state, hãy dùng tính năng remember để cho Inertia biết dữ liệu nào cần ghi nhớ.

{
    // Option 1: Object...
    remember: {
        data: ['form'],
    },

    // Option 2: Array...
    remember: ['form'],

    // Option 3: String...
    remember: 'form',

    data() {
        return {
            form: {
                first_name: null,
                last_name: null,
                // ...
            },
        }
    },
}

import { useRemember } from '@inertiajs/vue3'

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

import { useRemember } from '@inertiajs/react'

export default function Profile() {
    const [formState, setFormState] = useRemember({
        first_name: null,
        last_name: null,
        // ...
    })

    // ...
}

import { remember } from '@inertiajs/svelte'

let form = remember({
    first_name: null,
    last_name: null,
})

// ...

Từ đó, mỗi khi state form cục bộ thay đổi, Inertia sẽ tự động lưu dữ liệu này vào history state và cũng tự động khôi phục khi điều hướng lịch sử.

Nhiều component

Nếu trang có nhiều component cùng sử dụng chức năng remember của Inertia, bạn cần cung cấp một key duy nhất cho từng component để Inertia biết dữ liệu nào cần khôi phục vào component nào.

{
    remember: {
        data: ['form'],
        key: 'Users/Create',
    },
    data() {
        return {
            form: {
                first_name: null,
                last_name: null,
            },
        }
    },
}

import { useRemember } from '@inertiajs/vue3'

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

import { useRemember } from '@inertiajs/react'

export default function Profile() {
    const [formState, setFormState] = useRemember({
        first_name: null,
        last_name: null,
    }, 'Users/Create')

}

import { page, remember } from '@inertiajs/svelte'

let form = remember({
    first_name: null,
    last_name: null,
}, 'Users/Create')

Nếu có nhiều instance của cùng một component trên trang sử dụng remember, hãy đảm bảo mỗi instance cũng có một key duy nhất, chẳng hạn định danh model.

{
    remember: {
        data: ['form'],
        key() {
            return `Users/Edit:${this.user.id}`
        }
    },
    data() {
        return {
            form: {
                first_name: this.user.first_name,
                last_name: this.user.last_name,
            },
        }
    },
}

import { useRemember } from '@inertiajs/vue3'

const props = defineProps({ user: Object })

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

import { useRemember } from '@inertiajs/react'

export default function Profile() {
    const [formState, setFormState] = useRemember({
        first_name: props.user.first_name,
        last_name: props.user.last_name,
    }, `Users/Edit:${this.user.id}`)
}

import { page, remember } from '@inertiajs/svelte'

let form = remember({
    first_name: $page.props.user.first_name,
    last_name: $page.props.user.last_name,
}, `Users/Edit:${$page.props.user.id}`)

Form helper

Nếu đang dùng form helper của Inertia, bạn có thể truyền một form key duy nhất làm đối số đầu tiên khi khởi tạo form. Khi đó dữ liệu và lỗi của form sẽ tự động được ghi nhớ.

import { useForm } from '@inertiajs/vue2'

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

import { useForm } from '@inertiajs/vue3'

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

import { useForm } from '@inertiajs/react'

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

import { useForm } from '@inertiajs/svelte'

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

Lưu state thủ công

Thuộc tính remember trong Vue 2 và hook useRemember trong Vue 3, React và Svelte đều theo dõi thay đổi dữ liệu và tự động lưu các thay đổi đó vào history state. Sau đó, Inertia sẽ khôi phục dữ liệu khi trang được tải. Tuy nhiên, bạn cũng có thể tự quản lý việc này bằng các phương thức nền tảng remember() và restore() của Inertia.

import { router } from '@inertiajs/vue2'

// 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')

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')

import { router } from '@inertiajs/react'

// 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')

import { router } from '@inertiajs/svelte'

// 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')

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v1 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Nâng cao

Lưu state cục bộ

Nhiều component

Form helper

Lưu state thủ công

Tài liệu chính thức

​Lưu state cục bộ

​Nhiều component

​Form helper

​Lưu state thủ công

​Tài liệu chính thức

Lưu state cục bộ

Nhiều component

Form helper

Lưu state thủ công

Tài liệu chính thức