Ghi nhớ state

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 useRemember để cho Inertia biết dữ liệu cần ghi nhớ.

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 { useRemember } from "@inertiajs/svelte";

const form = useRemember({
  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.

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, useRemember } from "@inertiajs/svelte";

const form = useRemember(
  {
    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.

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, useRemember } from "@inertiajs/svelte";

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

Form helper

Nếu dùng Inertia form helper, bạn có thể truyền form key duy nhất làm đối số đầu tiên khi tạo form. Form data và error sẽ tự động được ghi nhớ.

import { useForm } from "@inertiajs/vue3";

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

import { useForm } from "@inertiajs/react";

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

import { useForm } from "@inertiajs/svelte";

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

Bạn có thể loại các field cụ thể khỏi dữ liệu được nhớ bằng phương thức dontRemember(). Điều này hữu ích với field nhạy cảm như password không nên lưu trong history state.

Lưu state thủ công

Hook useRemember theo dõi thay đổi dữ liệu và tự động lưu các thay đổi vào history state. Sau đó Inertia 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ý bằng các method nền tảng remember() và restore() mà Inertia expose.

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");

Một số trình duyệt giới hạn số lần gọi history.replaceState() trong một khoảng thời gian ngắn. Inertia bắt lỗi này và ghi ra console, nhưng state update sẽ bị mất. Tránh gọi router.remember() quá thường xuyên và cân nhắc debounce hoặc batch state update trong các trường hợp tần suất cao.

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 v3 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

Dữ liệu & Props

Bảo mật

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