Pinia Vue ਦੀ ਅਧਿਕਾਰਤ state-management ਲਾਇਬ੍ਰੇਰੀ (Vuex ਦੀ ਜਨਮ) ਹੈ — ਇੱਕ ਕੇਂਦ੍ਰੀਯ store ਅਵਸਥਾ ਲਈ ਜਿਸ ਨੂੰ ਬਹੁਤ ਸਾਰੇ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ ਸਾਂਝਾ ਕਰਨਾ ਪੜਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ Composition API ਦੇ ਆਧਾਰ ਤੇ ਇੱਕ ਸਧਾਰਨ, type-safe API ਹੈ।
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
ਇਹ "setup store" ਬਿਲਕੁਲ ਇੱਕ composable ਵਾਂਗ ਦਿਸਦਾ ਹੈ — state ਲਈ 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 reactivity ਨੂੰ ਤੋੜ ਸਕਦਾ ਹੈ (ਉਹੀ reactive ਸਾਵਧਾਨੀ 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 ਵਿੱਚ global, shared state ਲਈ ਮਾਨਕ ਸਮਾਧਾਨ ਹੈ — user/auth, shopping carts, app settings, cached data — ਕੁਝ ਵੀ ਜੋ ਬਹੁਤ ਸਾਰੇ ਦੂਰ ਥਿੰਡ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਇਕਸਾਰ ਤਰੀਕੇ ਨਾਲ ਪੜ੍ਹਨਾ ਅਤੇ ਅਪਡੇਟ ਕਰਨਾ ਪੜੇ।
ਇਸ ਦੀ composable-style API, first-class TypeScript support, ਅਤੇ Vuex ਦੇ boilerplate ਦੀ ਕਮੀ ਇਸ ਨੂੰ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਚੋਣ ਬਣਾਉਂਦੀ ਹੈ।
ਇਹ ਜਾਣਨਾ ਕਿ ਜਦੋਂ state ਸੱਚਮੁੱਚ global ਹੋਵੇ ਤਾਂ ਇਸ ਵੱਲ ਕਦੋਂ ਜਾ ਸਕਦੇ ਹੋ (props/inject ਦੇ ਬਨਾਮ), ਅਤੇ destructure ਉੱਤੇ reactivity ਨੂੰ ਸੰਭਾਲਣ ਲਈ storeToRefs ਨੂੰ ਵਰਤੋ, ਇਸ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਵਰਤਣ ਦਾ ਮੂਲ ਹੈ।