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 માટે ફંક્શન્સ — તે સાહજિક બનાવે છે જો તમે 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 apps માં વૈશ્વિક, સાંજેલી સ્ટેટ માટે પ્રમાણભૂત સમાધાન છે — વપરાશકર્તા/auth, શોપિંગ કાર્ટ્સ, app સેટિંગ્સ, કેશ કરેલ ડેટા — કંઈપણ જે ઘણા દૂરના ઘટકો સુસંગતાથી વાંચવા અને અપડેટ કરવા જોઈએ.
તેનો composable-style API, પ્રથમ-વર્ગ TypeScript સમર્થન, અને Vuex ના boilerplate ની અછતે તેને ભલામણ કરેલ પસંદ બનાવે છે.
જ્ઞાત રાખવો કે તેનો ઉપયોગ ક્યારે કરવો (props/inject વર્સેસ) જ્યારે સ્ટેટ સાચવટે વૈશ્વિક હોય, અને destructure પર પ્રતિક્રિયાશીલતા જાળવવા માટે storeToRefs વાપરવો, તેનો સાચો ઉપયોગ કરવાનું મૂલ છે.