> ## 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>Đâ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](/v3/getting-started/index).</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 tính năng `remember` để cho Inertia biết dữ liệu nào cần ghi nhớ.

<CodeGroup>
  ```js Vue 2 icon="vuejs" theme={null}
  {
      // 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,
                  // ...
              },
          }
      },
  }
  ```

  ```js Vue 3 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 { remember } from '@inertiajs/svelte'

  let form = remember({
      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 2 icon="vuejs" theme={null}
  {
      remember: {
          data: ['form'],
          key: 'Users/Create',
      },
      data() {
          return {
              form: {
                  first_name: null,
                  last_name: null,
              },
          }
      },
  }
  ```

  ```js Vue 3 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, remember } from '@inertiajs/svelte'

  let form = remember({
      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 2 icon="vuejs" theme={null}
  {
      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,
              },
          }
      },
  }
  ```

  ```js Vue 3 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, 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}`)
  ```
</CodeGroup>

## Form helper

Nếu đang dùng [form helper của Inertia](/forms#form-helper), 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ớ.

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

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

  ```js Vue 3 icon="vuejs" theme={null}
  import { useForm } from '@inertiajs/vue3'

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

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

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

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

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

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

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

  ```js Vue 3 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>

***

## 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](https://inertiajs.com/docs/v1/advanced/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.