Pinia என்பது Vue-ன் அதिकாரत்ர நிலை-நிர்வாகம் நூலகம் (Vuex-ன் வாரிசு) — பல கூறுகளின் மধ்যে பகிர்ந்து கொள்ள வேண்டிய நிலைக்கான மத்திய store, Composition API-ல் கட்டப்பட்ட எளிய, வகை-பாதுகாப்பு 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>
முக்கியம்: நிலை/getters பிரிக்கும்போது storeToRefs பயன்படுத்தவும் — சாதாரண பிரிப்பு எதிரெதிர்த்தன்மையை உடைக்கும் (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 அப்ளிக்கேஷன்களில் உலகளாவிய, பகிரப்பட்ட நிலை இன் நிலையான தீர்வு — பயனர்/நிரীक்ষணம், வாங்கும் வண்டிகள், பயன்பாட்டு அமைப்புகள், ஈவு தரவு — பல தூரதூர கூறுகள் தொடர்ந்து வாசிக்க மற்றும் புதுப்பிக்க வேண்டிய எந்த பொருளும்.
துளக் நடை API, முதல்-தர TypeScript ஆதரவு, மற்றும் Vuex இன் boilerplate இன் பற்றாக்குறை இதை பரிந்துரைக்கப்பட்ட தேர்வு செய்கிறது.
எப்போது இதை உயர்த்த வேண்டும் என்பது (vs props/inject) நிலை உண்மையாக உலகளாவியதாக இருக்கும்போது, மற்றும் பிரிப்பிற்கு எதிரெதிர்த்தன்மையை சமர்ப்பிக்க storeToRefs பயன்படுத்துவது, இதைச் சரியாகப் பயன்படுத்துவதன் மூலமாகும்.