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

<Warning>Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem [hướng dẫn nâng cấp](/v3/getting-started/upgrade-guide) để bắt đầu.</Warning>

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 [form helper của Inertia](/v2/the-basics/forms#form-helper), bạn có thể truyền một form key duy nhất làm đối số đầu khi khởi tạo form. Dữ liệu và lỗi form khi đó 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 trừ field cụ thể](/v2/the-basics/forms#excluding-fields) khỏi việc ghi nhớ bằng method `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 thời gian ngắn. Inertia bắt lỗi và log ra console, nhưng cập nhật state sẽ bị mất. Tránh gọi `router.remember()` quá thường xuyên và cân nhắc debounce hoặc batch update state trong tình huống 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 v2 chính thức](https://inertiajs.com/docs/v2/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.