Pinia Vue की आधिकारिक स्टेट-मैनेजमेंट लाइब्रेरी है (Vuex का उत्तराधिकारी) — कई घटकों में साझा की जाने वाली स्थिति के लिए एक केंद्रीय store, Composition API पर निर्मित एक सरल, type-safe API के साथ।
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
यह "setup store" बिल्कुल एक composable जैसा दिखता है — स्थिति के लिए ref, getters के लिए computed, actions के लिए functions — यह सहज बनाता है यदि आप Composition API जानते हैं।
<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { count, double } = storeToRefs(store); // keep state reactive when destructured
const { increment } = store; // actions can be destructured directly
</script>
<template>
<button @click="increment">{{ count }} (x2 = {{ double }})</button>
</template>
महत्वपूर्ण: state/getters को destructure करते समय storeToRefs का उपयोग करें — सामान्य destructuring प्रतिक्रियाशीलता को तोड़ देगा (reactive जैसी सावधानी)। Actions को इसकी आवश्यकता नहीं है।
✓ 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
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 ऐप्स में global, साझा स्थिति के लिए मानक समाधान है — user/auth, शॉपिंग कार्ट्स, ऐप सेटिंग्स, कैश किया गया डेटा — कुछ भी जो कई दूर के घटकों को सुसंगत रूप से पढ़ना और अपडेट करना चाहिए।
इसकी composable-style API, पहली-श्रेणी TypeScript समर्थन, और Vuex के boilerplate की कमी इसे अनुशंसित विकल्प बनाती है।
यह जानना कि इसे कब चुनना है (props/inject के विरुद्ध) जब स्थिति वास्तव में global हो, और destructure पर प्रतिक्रियाशीलता बनाए रखने के लिए storeToRefs का उपयोग करना, इसे सही तरीके से उपयोग करने का मूल है।