Pinia کے ساتھ state management کیسے کام کرتی ہے؟

Question

Accepted Answer

**Pinia** Vue کی سرکاری state-management لائبریری ہے (Vuex کی جانشین) — ایک مرکزی **store** جو state کو محفوظ کرتا ہے جو بہت سارے components کے ساتھ شیئر کرنے کی ضرورت ہے، Composition API پر بنائی گئی سادہ، type-safe API کے ساتھ۔ ## store کو define کرنا ```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" بالکل ایک composable کی طرح لگتا ہے — state کے لیے `ref`، getters کے لیے `computed`، actions کے لیے functions — یہ اس لیے سہل ہے اگر آپ Composition API جانتے ہیں۔ ## components میں store کو استعمال کرنا ```vue ``` **اہم:** **state/getters** کو destructure کرتے وقت `storeToRefs` استعمال کریں — سادہ destructuring reactivity کو توڑ دے گا (`reactive` جیسا ہی reactive caveat)۔ Actions کو اس کی ضرورت نہیں۔ ## Pinia کیوں 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 ``` ## کب store استعمال کریں بمقابلہ 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 ``` ## یہ اہم کیوں ہے Pinia Vue apps میں **global، shared state** کا معیاری حل ہے — user/auth، shopping carts، app settings، cached data — کوئی بھی چیز جو بہت سارے دور دراز components کو مستقل طریقے سے پڑھنی اور اپ ڈیٹ کرنی ہو۔ اس کی composable-style API، first-class TypeScript support، اور Vuex کے boilerplate کی کمی اسے recommended choice بناتے ہیں۔ یہ جاننا کہ اسے کب استعمال کریں (props/inject کے بجائے) جب state واقعی global ہو، اور destructure پر reactivity کو محفوظ رکھنے کے لیے `storeToRefs` استعمال کریں، یہ اسے صحیح طریقے سے استعمال کرنے کا بنیادی ہے۔