Quản lý state toàn cục với Pinia

Trong các ứng dụng có quy mô trung bình đến lớn, việc quản lý state cục bộ bằng useState đôi khi không đủ linh hoạt. Pinia – thư viện state management chính thức của Vue 3 – là lựa chọn lý tưởng để quản lý state toàn cục, cho phép tổ chức dữ liệu rõ ràng, dễ kiểm soát và mở rộng. Bài học này sẽ hướng dẫn cách tích hợp Pinia vào Nuxt 3, tạo store đầu tiên và sử dụng trong component thực tế.

Quản lý state toàn cục với Pinia

1. Giới thiệu Pinia – State Management hiện đại

• Pinia là thư viện quản lý state toàn cục, thay thế cho Vuex trong Vue 3.
• Tương thích tốt với Nuxt 3, hỗ trợ TypeScript, Devtools, Modular store.
• Dễ học, dễ dùng, với API đơn giản dựa trên Composition API.

2. Cài đặt và cấu hình Pinia trong Nuxt

Bước 1: Cài đặt module Pinia

npm install @pinia/nuxt

Bước 2: Cấu hình trong nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

Sau khi cài đặt, Nuxt tự động inject Pinia vào toàn app. Không cần setup thủ công.

3. Tạo store đầu tiên với Pinia

Ví dụ: Tạo store counter đơn giản.

// ~/stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  const increment = () => {
    count.value++
  }

  return { count, increment }
})

• defineStore('counter', () => {...}): tên store là 'counter'
• Sử dụng Composition API (ref, computed, function)

4. Sử dụng store trong component

<script setup>
const counter = useCounterStore()
</script>

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

Store dùng được ở bất kỳ đâu trong app, không cần truyền props hoặc emit.

5. Ưu điểm của Pinia

• Toàn cục: dữ liệu chia sẻ được giữa mọi component, page.
• Tái sử dụng tốt: chia nhỏ theo module.
• Tích hợp Devtools: theo dõi state, time travel.
• Tương thích SSR với Nuxt: không cần cấu hình thêm.

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

Pinia là một giải pháp đơn giản nhưng mạnh mẽ để quản lý trạng thái toàn cục trong Nuxt 3. Với cú pháp gọn nhẹ và khả năng mở rộng tốt, bạn có thể dễ dàng tạo các store chia sẻ logic và dữ liệu giữa các phần trong ứng dụng. Trong bài tiếp theo, chúng ta sẽ đi sâu hơn vào Actions, Getters và tổ chức nhiều module store một cách rõ ràng, chuyên nghiệp.