Quản lý state với Pinia hoạt động như thế nào?

Question

Accepted Answer

**Pinia** là thư viện quản lý state chính thức của Vue (kế nhiệm Vuex) — một **store** tập trung cho state cần được chia sẻ giữa nhiều component, với API đơn giản, an toàn về kiểu được xây dựng trên Composition API. ## Định nghĩa một store ```js // stores/counter.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useCounterStore = defineStore("counter", () => { // state const count = ref(0); // getter (state dẫn xuất) = computed const double = computed(() => count.value * 2); // action (method làm thay đổi state) function increment() { count.value++; } async function fetchInitial() { count.value = await api.getCount(); } return { count, double, increment, fetchInitial }; }); ``` "Setup store" này trông giống hệt một composable — `ref` cho state, `computed` cho getter, các hàm cho action — khiến nó trực quan nếu bạn biết Composition API. ## Dùng store trong component ```vue ``` **Quan trọng:** dùng `storeToRefs` khi destructure **state/getter** — destructure thông thường sẽ phá vỡ reactivity (cùng cái bẫy reactive như `reactive`). Action không cần điều này. ## Tại sao Pinia thay vì Vuex ```text ✓ Không có boilerplate mutation — action có thể thay đổi state trực tiếp ✓ Suy luận TypeScript xuất sắc (Vuex rất khó để đặt kiểu) ✓ Module hóa theo thiết kế — nhiều store nhỏ, không có sự phức tạp của module lồng nhau ✓ Native với Composition API, API nhỏ gọn, hỗ trợ devtools ``` ## Khi nào dùng store so với props/composable ```text props/emits → cha ↔ con provide/inject → chia sẻ trong một subtree Pinia store → state dùng chung TOÀN CỤC/toàn app (user auth, cart, settings) được truy cập bởi nhiều component không liên quan ``` ## Tại sao điều này quan trọng Pinia là giải pháp tiêu chuẩn cho **state dùng chung, toàn cục** trong app Vue — user/auth, giỏ hàng, cài đặt app, dữ liệu cache — bất cứ thứ gì mà nhiều component cách xa nhau phải đọc và cập nhật một cách nhất quán. API kiểu composable, hỗ trợ TypeScript hạng nhất, và việc không có boilerplate của Vuex khiến nó là lựa chọn được khuyến nghị. Biết khi nào dùng đến nó (so với props/inject) khi state thực sự toàn cục, và dùng `storeToRefs` để bảo toàn reactivity khi destructure, là cốt lõi của việc dùng nó đúng cách.