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>
গুরুত্বপূর্ণ: state/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 অ্যাপে গ্লোবাল, শেয়ারড স্টেট এর জন্য স্ট্যান্ডার্ড সমাধান — ব্যবহারকারী/প্রমাণীকরণ, শপিং কার্ট, অ্যাপ সেটিংস, ক্যাশড ডেটা — যেকোনো কিছু যা অনেক দূরবর্তী কম্পোনেন্টকে ধারাবাহিকভাবে পড়তে এবং আপডেট করতে হয়।
এর composable-স্টাইল API, প্রথম-শ্রেণীর TypeScript সাপোর্ট, এবং Vuex এর boilerplate এর অভাব এটিকে সুপারিশকৃত পছন্দ করে তোলে।
কখন এটিতে পৌঁছাতে হবে (props/inject এর বিপরীতে) যখন স্টেট সত্যিই গ্লোবাল, এবং ডিস্ট্রাকচার করার সময় রিঅ্যাক্টিভিটি সংরক্ষণ করতে storeToRefs ব্যবহার করতে হবে, এটি সঠিকভাবে ব্যবহারের মূল বিষয়।