Vue Academy · درس

‏inject() في المكوّنات الابنة

‏inject() مع قيم افتراضية، والحقن المطلوب، ومفاتيح Symbol لتعيين النطاقات

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

دالة inject

تسترجع inject قيمة وفرها أحد العناصر السلف، وذلك بالبحث عنها باستخدام المفتاح نفسه. استدعوا هذه الدالة في <script setup>.

import { inject } from "vue";
const theme = inject("theme");

تظل التفاعلية محفوظة

إذا وفّر المكوّن السلف ref، فستكون القيمة المحقونة هي الـ ref نفسه. وتظل قراءة theme.value تفاعلية، وتُحدّث عند تغييرها من الموفّر.

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)

توفير قيمة افتراضية

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

const theme = inject("theme", "light");
// "light" used when nothing was provided

القيم الافتراضية المُنشأة بدالة

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

const config = inject("config", () => ({ retries: 3 }), true);

حقن الإجراءات

إذا وفّر الموفّر دالة أيضًا، فاحقنوها بالطريقة نفسها واستدعواها لطلب التغييرات — إذ يظل الموفّر مسؤولًا عن التعديل.

const updateName = inject("updateName");
updateName("Grace");

حقن كائن مخزن

عندما يجمع الموفّر الحالة والإجراءات، احقنوا الكائن كاملًا واستخرجوا منه ما تحتاجون إليه.

const { user, updateName } = inject("userStore");

الحقن الآمن من حيث النوع في TypeScript

تصدّر Vue النوع InjectionKey<T> لجعل الحقن آمنًا من حيث النوع. ويخبر المفتاح المعرّف TypeScript بالشكل الذي ستتخذه القيمة المحقونة بدقة.

import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");

استخدام المفتاح المعرّف

نفّذوا التوفير والحقن باستخدام المفتاح المعرّف. وسيستنتج TypeScript الآن نوع القيمة ويبلغ عن حالات عدم التطابق.

provide(themeKey, theme);          // theme: Ref<string>
const theme = inject(themeKey);    // inferred Ref<string> | undefined

مفاتيح Symbol لضمان التفرد

يضمن استخدام Symbol بوصفه المفتاح، وغالبًا بالاقتران مع InjectionKey، عدم حدوث تعارضات بين السلاسل النصية الخاصة بالموفّرين غير المرتبطين في قاعدة شيفرة كبيرة.

export const authKey = Symbol("auth") as InjectionKey<AuthService>;

التعامل مع غياب الموفّرين

في الإعدادات الصارمة، قد ترغبون في طرح خطأ عند غياب حقن مطلوب، لكشف أخطاء الربط مبكرًا بدلًا من استخدام undefined بصمت.

const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");

إجراء Inject في أي موضع من الشجرة الفرعية

يمكن للمكوّن إجراء Inject بغض النظر عن العمق، ما دام أحد العناصر السلف قد وفّر المفتاح. وتبقى المكوّنات الوسيطة دون تغيير — فهذا هو الهدف الأساسي من Provide وInject.

تحقق سريع

ماذا تعيد inject("theme", "light") عند عدم وجود موفّر؟

مراجعة

تعلمتم أن inject(key) يقرأ قيمة متوفرة، مع الحفاظ على تفاعلية refs. مرروا قيمة افتراضية أو دالة مُنشئة للحصول على بديل سلس، واستخدموا InjectionKey<T> مع مفاتيح Symbol لإجراء حقن آمن من حيث النوع وخالٍ من التعارضات.

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

هل درس «‏inject() في المكوّنات الابنة» مجاني؟

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

ماذا ستتعلم في «‏inject() في المكوّنات الابنة»؟

‏inject() مع قيم افتراضية، والحقن المطلوب، ومفاتيح Symbol لتعيين النطاقات تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «‏inject() في المكوّنات الابنة»؟

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

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

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

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

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