Vue Academy · درس

‏Provide/Inject لحالة مستوى التطبيق

‏app.provide() للحالة العامة والتنسيق وi18n، وتجنّب Pinia في الحالات البسيطة

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

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

التوفير على مستوى التطبيق

إلى جانب provide على مستوى المكوّن، يمكنكم التوفير على مثيل التطبيق باستخدام app.provide. وتصبح القيمة متاحة لـ كل مكوّن في التطبيق.

const app = createApp(App);
app.provide("appVersion", "1.0.0");

توفير الخدمات العامة

يُعد التوفير على مستوى التطبيق مثاليًا للمفردات مثل خدمة المصادقة أو عميل HTTP أو المسجّل — أي العناصر التي قد يحتاج إليها التطبيق بأكمله.

import { authService } from "./auth";
app.provide("auth", authService);

استهلاك خدمة عامة

يمكن لأي مكوّن إجراء Inject للخدمة باستخدام المفتاح، من أي موضع في الشجرة، من دون تمرير props بشكل متسلسل أو إضافة عمليات ربط أخرى.

const auth = inject("auth");
auth.login(credentials);

مفاتيح Symbol للخدمات العامة

بالنسبة إلى الخدمات المتاحة على مستوى التطبيق، تحافظ مفاتيح Symbol المُصدّرة، ويفضل أن تكون معرّفة النوع، على أمان الحقن وسهولة اكتشافه في قاعدة الشيفرة.

// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);

ترتيب البحث

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

السيناريوهات كثيفة القراءة

يتفوق Provide وInject عندما تكتفي مكوّنات كثيرة بقراءة البيانات المشتركة، مثل السمة والإعدادات المحلية والإعدادات. فلا يحتاج المستهلكون إلى الكتابة، مما يحافظ على بساطة النمط وقابليته للتنبؤ.

مقارنة Pinia

Pinia هي مكتبة إدارة الحالة الرسمية في Vue. وهي توفر أدوات المطوّرين والمخازن المعيارية والإجراءات وgetters وتصحيح الأخطاء عبر الزمن، مما يجعلها مثالية للحالة العامة المعقدة وكثيرة التعديل.

import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });

متى يكون Provide وInject كافيًا

بالنسبة إلى القيم المشتركة التي تكون للقراءة فقط في الغالب، يتجنب Provide وInject النفقات الإضافية للمخزن. فهو أخف وزنًا ومضمّن في Vue وواضح الاستخدام للسمة أو i18n أو الخدمات المحقونة.

متى تلجؤون إلى Pinia

اختاروا Pinia عندما يتم تعديل الحالة من مواضع كثيرة، أو تحتاج إلى أدوات المطوّرين، أو يجب حفظها، أو تحتوي على بيانات مشتقة معقدة. فهي توحّد المنطق بصورة أفضل من أزواج Provide وInject المتناثرة.

استخدامهما معًا

لا يستبعد أحدهما الآخر. فقد تستخدمون Pinia لبيانات التطبيق، وProvide وInject لسياق خفيف ضمن شجرة المكوّنات، مثل نموذج أو سمة لواجهة المستخدم.

provide("formContext", { register, errors });

اعتبارات الاختبار

عند اختبار مكوّن اختبارًا وحداتيًا يستخدم الحقن، وفروا القيمة عبر خيارات تركيب الاختبار global.provide حتى يتلقى المكوّن قيمة بديلة.

mount(MyComponent, {
  global: { provide: { auth: fakeAuth } }
});

تحقق سريع

متى يُفضّل استخدام Provide وInject بدلًا من Pinia؟

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

مراجعة

تعلمتم أن app.provide يتيح الخدمات العامة لكل مكوّن، ويمكن استهلاكها باستخدام المفتاح من أي موضع عبر inject. ويتألق Provide وInject مع السياق المشترك كثيف القراءة، بينما تناسب Pinia الحالة العامة المعقدة وكثيرة التعديل مع دعم أدوات المطوّرين.

البدء مجانًا

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

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

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

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

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

هل درس «‏Provide/Inject لحالة مستوى التطبيق» مجاني؟

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

ماذا ستتعلم في «‏Provide/Inject لحالة مستوى التطبيق»؟

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

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

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

كم من الوقت يستغرق درس «‏Provide/Inject لحالة مستوى التطبيق»؟

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

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

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

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

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