Pinia هي مكتبة إدارة الحالة الرسمية في Vue (الخليفة الرسمية لـ Vuex) — store مركزي للحالة التي تحتاج إلى مشاركتها عبر العديد من المكونات، بواسطة API بسيط وآمن من حيث النوع مبني على Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
هذا "setup store" يبدو تماماً مثل composable — ref للحالة، computed للمُحصِّلات (getters)، دوال للإجراءات (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>
مهم: استخدم storeToRefs عند فك الحالة/المُحصِّلات — الفك العادي قد يكسر التفاعلية (نفس تحذير reactive). الإجراءات لا تحتاجها.
✓ 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، دعم TypeScript من الدرجة الأولى، والافتقار إلى حشوة Vuex تجعلها الخيار الموصى به.
معرفة متى تصل إليها (مقابل props/inject) عندما تكون الحالة عامة حقاً، واستخدام storeToRefs للحفاظ على التفاعلية عند الفك، هو أساس استخدامها بشكل صحيح.