Vue Academy · درس

تركيب Stores والوصول بين Stores

استخدام Store داخل Store آخر، وأنماط تركيب Stores، وتجنب التبعيات الدائرية

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

يمكن لـ stores استخدام stores أخرى

تحتوي التطبيقات الفعلية على عدة stores يحتاج بعضها إلى بعض. فقد يحتاج cart store إلى auth store لمعرفة المستخدم الحالي. تجعل Pinia الوصول بين stores أمرًا مباشرًا.

استدعاء store داخل action

داخل action، ما عليك سوى استدعاء composable الخاصة بـ store الأخرى. وبما أن actions تعمل بعد تفعيل Pinia، فإن هذا الاستخدام آمن.

import { useAuthStore } from './auth'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    checkout() {
      const auth = useAuthStore()
      if (!auth.isLoggedIn) return
      // proceed with auth.userId
    }
  }
})

صيغة setup store

بالإضافة إلى كائن الخيارات، تقبل defineStore دالة setup. وهي تشبه setup في المكونات: تعرّف refs وcomputeds، ثم تعيدها.

import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  return { count }
})

الحالة باستخدام refs

في setup store، يصبح كل ref أو reactive تعيده جزءًا من state. استخدم ref للقيم البدائية وreactive للكائنات.

export const useUserStore = defineStore('user', () => {
  const name = ref('Coddy')
  const profile = reactive({ age: 30 })
  return { name, profile }
})

getters باستخدام computed

تعمل computed المعادة بوصفها getter. فهي مخزنة مؤقتًا وتفاعلية، تمامًا مثل getters في option store.

export const useCounterStore = defineStore('counter', () => {
  const count = ref(2)
  const doubled = computed(() => count.value * 2)
  return { count, doubled }
})

actions على هيئة دوال

تُعد الدالة المعادة action. ويمكنها قراءة refs وكتابتها مباشرة باستخدام .value.

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
})

إعادة refs وcomputed

القاعدة الأساسية في setup stores هي: أعد كل ما تريد إتاحته. وكل ما لا تعيده يظل خاصًا بـ store.

export const useStore = defineStore('s', () => {
  const visible = ref(0)
  const secret = ref('hidden') // not returned -> private
  return { visible }
})

الوصول بين stores في setup store

في setup store، يمكنك استدعاء store أخرى على المستوى الأعلى واستخدامها في computeds أو actions.

export const useCartStore = defineStore('cart', () => {
  const auth = useAuthStore()
  const canCheckout = computed(() => auth.isLoggedIn)
  return { canCheckout }
})

تجنب التبعيات الدائرية

إذا استوردت store A من store B واستوردت B من A، فقد تواجه تبعية دائرية. تجنب استدعاء store الأخرى على مستوى الوحدة؛ واستدعها بدلًا من ذلك داخل الـ action أو getter حيث تحتاج إليها.

// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
  doWork() {
    const other = useOtherStore() // resolved at call time
  }
}

لماذا تساعد الاستدعاءات المؤجلة

يؤدي استدعاء composable الخاصة بـ store داخل دالة إلى تأجيل الحل حتى وقت التشغيل، بعد تحميل جميع الوحدات. ويؤدي ذلك إلى كسر دورة الاستيراد التي تتسبب في التعطل أثناء تقييم الوحدة.

مقارنة option stores وsetup stores

كلا الأسلوبين متساويان في القوة. اختر option stores إذا أردت بنية مألوفة وتصريحية، واختر setup stores عندما تريد مرونة Composition API الكاملة، مثل استخدام watchers أو composables داخل store.

اختبار سريع

اختبروا مدى فهمكم لتركيب المتاجر.

خلاصة

لقد تعلمتم تركيب المتاجر:

استدعوا متجرًا آخر قابلًا للتركيب داخل إجراء للوصول بين المتاجر.
تستخدم متاجر Setup دالة: تكون refs هي الحالة، وcomputed هي getters، والدوال هي actions.
أعيدوا كل ما تريدون إتاحته.
استدعوا المتاجر عند الحاجة داخل الدوال لتجنب التبعيات الدائرية.

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

هل درس «تركيب Stores والوصول بين Stores» مجاني؟

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

ماذا ستتعلم في «تركيب Stores والوصول بين Stores»؟

استخدام Store داخل Store آخر، وأنماط تركيب Stores، وتجنب التبعيات الدائرية تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «تركيب Stores والوصول بين Stores»؟

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

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

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

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

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