Vue Academy · درس

الحالة المشتركة بين Micro-Frontends

مشاركة Pinia stores، وناقل أحداث عبر CustomEvent، واستخدام URL كحالة مشتركة

الدرس 4 من 413 خطوة

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

تحدي الحالة المشتركة

ما زالت الواجهات الأمامية المصغّرة المستقلة بحاجة إلى التنسيق: ينبغي لتسجيل الدخول في جزء أن يحدّث الترويسة في جزء آخر. لكن الاقتران الوثيق يقوّض الهدف. والغاية هي تحقيق تواصل مرن ومدروس.

تجنّب الحالة العامة الضمنية

إن وضع كل شيء في window أو في مخزن مشترك ضخم يعيد إنشاء الاقتران الموجود في التطبيق الأحادي. فضّلوا عقودًا صريحة ومحدودة بين الأجزاء حتى تتمكن الفرق من التطور بشكل مستقل.

استخدام CustomEvent للتواصل

توفّر واجهة CustomEvent في المتصفح ناقلًا مستقلًا عن إطار العمل. ترسل إحدى الواجهات الأمامية المصغّرة حدثًا على window، وتصغي الواجهات الأخرى إليه — دون الحاجة إلى عمليات استيراد مشتركة.

const event = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 },
})
window.dispatchEvent(event)

الاستماع إلى الأحداث

تشترك الأجزاء الأخرى باستخدام addEventListener، وتقرأ الحمولة من event.detail. ويفصل ذلك بين المرسل والمستقبل — إذ لا يحتاجان إلا إلى الاتفاق على اسم الحدث وشكله.

window.addEventListener("cart:add", (e) => {
  console.log("Added", e.detail.productId)
})

تنظيف مستمعي الأحداث في Vue

سجّلوا مستمعي الأحداث في onMounted وأزيلوهم في onUnmounted لتجنب التسريبات وتكرار المعالجات عند إعادة تركيب المكوّنات.

import { onMounted, onUnmounted } from "vue"

function onAdd(e) { /* ... */ }
onMounted(() => window.addEventListener("cart:add", onAdd))
onUnmounted(() => window.removeEventListener("cart:add", onAdd))

عقد أحداث محدّد الأنواع

وثّقوا الأحداث بوصفها عقدًا حتى يعرف كل فريق الاسم وشكل الحمولة. هذه هي واجهة برمجة التطبيقات العامة بين الواجهات الأمامية المصغّرة.

// events contract
// "cart:add"    -> { productId: number, qty: number }
// "auth:login"  -> { userId: string }
// "auth:logout" -> {}

عنوان URL كحالة مشتركة

يُعد عنوان URL مخزنًا مشتركًا طبيعيًا للتنقّل والمرشحات: فهو عام، وقابل للمشاركة ووضع إشارة مرجعية، ويمكن لكل جزء قراءته. ضعوا الحالة المشتركة بين الأجزاء، مثل المرشح النشط أو الصفحة، في مَعلمات الاستعلام.

const params = new URLSearchParams(location.search)
const category = params.get("category") // shared across slices

تحديث حالة عنوان URL

اكتبوا حالة المرشح والتنقّل المشتركة في عنوان URL باستخدام History API حتى تظل قابلة للمشاركة ومتوافقة مع زر الرجوع. وتستجيب جميع الأجزاء بقراءة عنوان URL الجديد.

function setCategory(value) {
  const url = new URL(location.href)
  url.searchParams.set("category", value)
  history.pushState({}, "", url)
}

متجر Pinia أحادي النسخة

بالنسبة إلى الحالة المشتركة الأكثر ثراءً داخل صفحة واحدة، يعمل متجر Pinia أحادي النسخة — لكن فقط إذا تمت مشاركة Pinia كنسخة مفردة عبر federation حتى تستخدم جميع الأجزاء النسخة نفسها.

// federation config (both sides)
shared: {
  pinia: { singleton: true },
  vue: { singleton: true },
}

استخدام المتجر المشترك

عند مشاركة Pinia كنسخة مفردة، يكون المتجر الذي يستورده جزآن هو نسخة المتجر نفسها — إذ تقرأ إحدى الواجهتين الأماميتين المصغّرتين الحالة التي تكتبها الأخرى بصورة تفاعلية.

// slice A writes
const auth = useAuthStore()
auth.login(user)

// slice B reads the same reactive state
const auth = useAuthStore()
console.log(auth.user)

اختيار الاستراتيجية

CustomEvent — إشعارات مرنة ومستقلة عن إطار العمل.
URL — للتنقّل والمرشحات وكل ما يمكن مشاركته أو وضعه كإشارة مرجعية.
متجر Pinia أحادي النسخة — لحالة تفاعلية ثرية داخل الصفحة، ويتطلب singleton: true.

فضّلوا الخيار الأقل اقترانًا الذي يلبّي الحاجة.

تحقق سريع

تحققوا من فهمكم للحالة المشتركة بين الواجهات الأمامية المصغّرة.

أجب عليها في الدرس التفاعلي

خلاصة

تعلّمتم مشاركة الحالة بين الواجهات الأمامية المصغّرة:

فضّلوا العقود المرنة والصريحة على الحالة العامة الضمنية.
يوفّر CustomEvent على window مع addEventListener رسائل مستقلة عن إطار العمل؛ ونظّفوا المستمعين في onUnmounted.
يحتفظ URL (بمعلمات الاستعلام عبر History API) بحالة التنقّل والمرشحات القابلة للمشاركة.
يشارك متجر Pinia أحادي النسخة حالة تفاعلية ثرية، لكن فقط عند استخدام singleton: true في federation.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «الحالة المشتركة بين Micro-Frontends» مجاني؟

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

ماذا ستتعلم في «الحالة المشتركة بين Micro-Frontends»؟

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

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

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

كم من الوقت يستغرق درس «الحالة المشتركة بين Micro-Frontends»؟

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

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

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

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

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