Quản lý state cục bộ với useState

Trong Nuxt 3, useState là một phương pháp tiện lợi để tạo state cục bộ hoặc chia sẻ giữa các thành phần trong cùng một app, mà không cần thiết lập hệ thống quản lý state phức tạp như Vuex hay Pinia. Bài học này sẽ hướng dẫn bạn cách sử dụng useState, phân biệt với ref và reactive, cũng như cách chia sẻ state này giữa các trang trong ứng dụng Nuxt.

Quản lý state cục bộ với useState

1. Tạo state cục bộ với useState

useState là hàm được Nuxt cung cấp để tạo reactive state, có thể được dùng trong mọi component, composable hoặc page.

<script setup>
const counter = useState('counter', () => 0)
</script>

<template>
  <button @click="counter++">Tăng: {{ counter }}</button>
</template>

Giải thích:

• 'counter' là key định danh.
• Hàm () => 0 là giá trị khởi tạo, chỉ được gọi 1 lần.
• Nuxt đảm bảo state này được chia sẻ trong cùng một phiên SSR hoặc hydration client.

2. So sánh useState với reactive và ref

Khi nào dùng useState:

• Khi muốn chia sẻ state đơn giản giữa các component/page.
• Khi cần state tồn tại xuyên suốt quá trình SSR + hydration.

3. Chia sẻ state giữa các trang (Pages)

Bạn có thể tạo state trong một trang và sử dụng lại ở nơi khác:

// ~/pages/index.vue
<script setup>
const counter = useState('counter', () => 0)
</script>
<template>
  <NuxtLink to="/about">Go to About</NuxtLink>
  <p>Index Counter: {{ counter }}</p>
</template>

// ~/pages/about.vue
<script setup>
const counter = useState('counter', () => 0)
</script>
<template>
  <NuxtLink to="/">Back</NuxtLink>
  <p>About Counter: {{ counter }}</p>
</template>

Lưu ý:

• useState không reset khi chuyển trang nếu cùng key.
• Giống như một singleton cho mỗi phiên SSR.

4. Dùng useState trong composable

Bạn có thể tạo một file composable để tái sử dụng state:

// ~/composables/useCounter.ts
export const useCounter = () => useState('counter', () => 0)

// bất kỳ file nào
<script setup>
const counter = useCounter()
</script>

Kết luận bài học

useState là một tính năng mạnh mẽ của Nuxt giúp bạn quản lý state cục bộ hoặc dùng chung giữa các component và trang, mà không cần cài thêm thư viện. So với ref() hay reactive() trong Vue 3, useState có ưu thế trong các app cần SSR hoặc trạng thái được duy trì khi chuyển trang. Tuy nhiên, khi ứng dụng trở nên phức tạp, bạn có thể cần đến các giải pháp quản lý state toàn cục như Pinia, sẽ được trình bày trong bài tiếp theo.