Vue Academy · درس

‏Pinia مقابل Vuex: سبب الانتقال

من دون mutations، واستدلال TypeScript، ودعم devtools، وواجهة أبسط، وتصميم معياري افتراضيًا

‏Pinia مقابل Vuex: سبب الانتقال درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

لماذا حلّت Pinia محل Vuex

تُعد Pinia مكتبة إدارة الحالة الرسمية لـ Vue 3، ويوصى باستخدامها بدلًا من Vuex. فهي تحافظ على مزايا Vuex، لكنها تزيل التعليمات البرمجية التمهيدية والأجزاء التي لم تكن ملائمة لـ TypeScript.

لا مزيد من mutations

كانت Vuex تتطلب استخدام mutations بوصفها الطريقة الوحيدة لتغيير الحالة. أما Pinia فتتخلى عنها بالكامل — إذ تعمل actions على تغيير الحالة مباشرة. طقوس أقل، وملفات أقل، مع الاحتفاظ بتتبع أدوات التطوير نفسه.

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

استنتاج أنواع TypeScript جاهز للاستخدام

كان تحديد أنواع store في Vuex مؤلمًا ويتطلب أغلفة معقدة. تستنتج Pinia الأنواع تلقائيًا من state وgetters وactions — من دون طبقة إضافية لتحديد الأنواع.

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

تصميم معياري

كانت Vuex تستخدم store واحدًا مع modules متداخلة ومشكلات مزعجة في استخدام مساحات الأسماء. أما Pinia فهي معيارية بطبيعتها: ملف واحد لكل store، يُنشأ كل منها باستخدام defineStore الخاص به. ولا تحتاج إلى تسجيل مركزي.

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

لا حاجة إلى مساحات الأسماء

بما أن كل store مستقل ويتم استيراده في الموضع الذي يُستخدم فيه، فلا توجد مساحة أسماء عامة تحتاج إلى إدارتها. ما عليك سوى استيراد store المطلوب واستدعائه كدالة.

import { useUserStore } from '@/stores/user'
const user = useUserStore()

دعم أدوات التطوير

تتكامل Pinia مع Vue Devtools كما كانت Vuex تفعل. تحصل على خط زمني للإجراءات، وفحص للحالة، وتصحيح الأخطاء بالعودة عبر الزمن — من دون كتابة mutations.

حزمة أصغر

حجم Pinia أصغر من Vuex بنحو 1KB، كما أنها تدعم tree-shaking. ولا تُضمّن stores التي لا تستوردها في الحزمة النهائية.

واجهة برمجة تطبيقات أبسط

لا توجد تعليمات برمجية تمهيدية لـ mapState أو mapGetters أو mapActions. استدعِ composable الخاصة بـ store داخل setup، واستخدم الكائن المعاد مباشرة.

const counter = useCounterStore()
// access state, getters, and actions on one object

تعمل مع كلتا الواجهتين

تدعم Pinia كلًا من Options API وComposition API. والأسلوبان لكتابة store هما option store (كائن) وsetup store (دالة)، وسنتناولهما لاحقًا في هذه الدورة.

تثبيت Pinia

أضف Pinia إلى تطبيقك بإنشاء المثيل وتسجيله كإضافة. ومنذ ذلك الحين، يمكن لأي مكون استخدام أي store.

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

متى تستخدم Pinia

استخدم Pinia عندما تجب مشاركة الحالة بين عدة مكونات، أو الاحتفاظ بها أثناء تغيّر المسارات، أو فحصها في أدوات التطوير. أما الحالة المحلية لمكون واحد، فيظل ref العادي أبسط.

تحقق سريع

اختبر مدى فهمك لأسباب حلول Pinia محل Vuex.

مراجعة

Pinia هي الخيار الحديث لإدارة الحالة في Vue 3:

لا توجد mutations — تعمل actions على تغيير الحالة مباشرة.
استنتاج تلقائي لأنواع TypeScript من دون أغلفة.
معيارية: store واحد لكل ملف، ومن دون مساحات أسماء.
دعم كامل لأدوات التطوير وحزمة أصغر بنحو 1KB.

الأسئلة الشائعة

هل درس «‏Pinia مقابل Vuex: سبب الانتقال» مجاني؟

نعم — نص درس «‏Pinia مقابل Vuex: سبب الانتقال» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏Pinia مقابل Vuex: سبب الانتقال»؟

من دون mutations، واستدلال TypeScript، ودعم devtools، وواجهة أبسط، وتصميم معياري افتراضيًا تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «‏Pinia مقابل Vuex: سبب الانتقال»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy