Bagaimanakah pengurusan keadaan dengan Pinia berfungsi?

Question

Accepted Answer

**Pinia** adalah perpustakaan pengurusan keadaan rasmi Vue (pengganti Vuex) — **store** terpusat untuk keadaan yang perlu dikongsi antara banyak komponen, dengan API yang mudah dan aman untuk tipe yang dibina di atas Composition API. ## Menentukan store ```js // stores/counter.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useCounterStore = defineStore("counter", () => { // state const count = ref(0); // getters (derived state) = computed const double = computed(() => count.value * 2); // actions (methods that mutate state) function increment() { count.value++; } async function fetchInitial() { count.value = await api.getCount(); } return { count, double, increment, fetchInitial }; }); ``` "Setup store" ini terlihat sama persis dengan composable — `ref` untuk keadaan, `computed` untuk getter, fungsi untuk tindakan — menjadikannya intuitif jika anda tahu Composition API. ## Menggunakan store dalam komponen ```vue ``` **Penting:** gunakan `storeToRefs` apabila melepaskan struktur **keadaan/getter** — pelepasan struktur biasa akan memecahkan reaktivitas (amaran reaktif yang sama seperti `reactive`). Tindakan tidak memerlukannya. ## Mengapa Pinia berbanding Vuex ```text ✓ No mutations boilerplate — actions can mutate state directly ✓ Excellent TypeScript inference (Vuex was painful to type) ✓ Modular by design — many small stores, no nested-module complexity ✓ Composition-API-native, tiny API, devtools support ``` ## Bilakah menggunakan store berbanding props/composables ```text props/emits → parent ↔ child provide/inject → share within a subtree Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings) accessed by many unrelated components ``` ## Mengapa ini penting Pinia adalah penyelesaian standard untuk **keadaan global dan dikongsi** dalam aplikasi Vue — pengguna/auth, troli membeli-belah, tetapan aplikasi, data dalam cache — apa sahaja yang banyak komponen jauh mesti baca dan kemas kini secara konsisten. API gaya composablenya, sokongan TypeScript kelas pertama, dan ketiadaan boilerplate Vuex menjadikannya pilihan yang disyorkan. Mengetahui kapan hendak menggunakannya (berbanding props/inject) apabila keadaan benar-benar global, dan menggunakan `storeToRefs` untuk memelihara reaktivitas pada pelepasan struktur, adalah teras penggunaannya dengan betul.