> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# 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ớ.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { useRemember } from "@inertiajs/vue3";

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

  ```jsx React icon="react" theme={null}
  import { useRemember } from "@inertiajs/react";

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

    // ...
  }
  ```

  ```js Svelte icon="s" theme={null}
  import { useRemember } from "@inertiajs/svelte";

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

  // ...
  ```
</CodeGroup>

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.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { useRemember } from "@inertiajs/vue3";

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

  ```jsx React icon="react" theme={null}
  import { useRemember } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { page, useRemember } from "@inertiajs/svelte";

  const form = useRemember(
    {
      first_name: null,
      last_name: null,
    },
    "Users/Create",
  );
  ```
</CodeGroup>

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.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { useRemember } from "@inertiajs/vue3";

  const props = defineProps({ user: Object });

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

  ```jsx React icon="react" theme={null}
  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}`,
    );
  }
  ```

  ```js Svelte icon="s" theme={null}
  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}`,
  );
  ```
</CodeGroup>

## Form helper

Nếu dùng [Inertia form helper](/v3/the-basics/forms#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ớ.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { useForm } from "@inertiajs/vue3";

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

  ```js React icon="react" theme={null}
  import { useForm } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { useForm } from "@inertiajs/svelte";

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

Bạn có thể [loại các field cụ thể](/v3/the-basics/forms#excluding-fields) 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.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  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");
  ```

  ```js React icon="react" theme={null}
  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");
  ```

  ```js Svelte icon="s" theme={null}
  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");
  ```
</CodeGroup>

<Warning>
  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.
</Warning>

***

## 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](https://inertiajs.com/docs/v3/data-props/remembering-state). 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.