Vue Academy · درس

الخصائص العامة وprovide/inject في الإضافات

‏app.config.globalProperties.$myPlugin، واستخدام app.provide() للحقن، وتوسعة أنواع TypeScript

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

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

طريقتان لإتاحة الخدمات

يمكن للإضافات مشاركة الوظائف بطريقتين: الخصائص العامة، وهي أسلوب Options API التقليدي الذي يمكن الوصول إليه عبر this.$x، وprovide/inject، وهو أسلوب Composition API. تفضّل الشفرة الحديثة provide/inject، بينما تظل الخصائص العامة مفيدة في قواعد الشفرة التي تستخدم Options API.

app.config.globalProperties

يجعل app.config.globalProperties.$http = client الخاصية this.$http متاحةً في كل مكوّن من مكوّنات Options API. ومن المتعارف عليه استخدام البادئة $ لتجنّب التعارض مع بيانات المكوّن.

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

استخدام $http في Options API

داخل مكوّن من مكوّنات Options API، يمكن الوصول إلى الخاصية العامة عبر this.

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

لماذا لا يمكن لـ Composition API استخدام this

لا توجد في <script setup> قيمة this مرتبطة بنسخة المكوّن. لذلك لا تعمل this.$http. وبدلًا من ذلك، يقرأ Composition API القيم المحقونة، وهو الأسلوب الموصى به.

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

استخدام provide في الإضافة

لدعم Composition API، ينبغي للإضافة أيضًا استخدام app.provide لإتاحة الخدمة نفسها تحت مفتاح. وفّروا الطريقتين: خاصية عامة لـ Options API، وprovide لـ Composition API.

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

استخدام inject في Composition API

تقرأ المكوّنات الخدمة باستخدام inject(httpKey). ويؤدي استخدام مفتاح Symbol المُصدَّر إلى تجنّب أخطاء السلاسل النصية وتمكين تحديد النوع.

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

مفاتيح الحقن ذات الأنواع باستخدام InjectionKey

لضمان سلامة الأنواع بالكامل، حدّدوا نوع المفتاح باستخدام InjectionKey<T>. عندها يستنتج inject نوع القيمة الصحيح تلقائيًا.

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

تحديد نوع $http باستخدام توسيع الوحدات

لجعل this.$http آمنًا من ناحية النوع، وسّعوا الواجهة ComponentCustomProperties الخاصة بـ Vue في ملف .d.ts. عندها يعرف TypeScript نوع this.$http في كل مكان.

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

موضع التوسيع

يجب أن يكون التوسيع وحدةً برمجية، لاحظوا export {} في نهايتها، وأن يكون مشمولًا في tsconfig.json. ضعوه بجوار الإضافة حتى تنتقل الأنواع معها عند نشرها.

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

الخصائص العامة: استخدموها باعتدال

الخصائص العامة مريحة، لكنها تبعيات مخفية تجعل اختبار المكوّنات وفهمها أصعب. فضّلوا provide/inject لأنه صريح ومحدّد بنطاق شجرة المكوّنات. واحصروا الخصائص العامة في الأدوات التي يحتاج إليها التطبيق بأكمله فعلًا، والمتوافقة مع Options API.

دعم الأسلوبين

تدعم الإضافة المتكاملة كلًا من Options API وComposition API: اضبطوا خاصية عامة ووفّروا القيمة أيضًا، وأرفقوا توسيع الأنواع لكل من الخاصية العامة ومفتاح الحقن ذي النوع المحدد. ويختار المستهلكون ما يناسب أسلوب مكوّناتهم.

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

اختبار سريع

اختبروا فهمكم للخصائص العامة وprovide/inject في الإضافات.

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

مراجعة

تعلّمتم إتاحة خدمات الإضافات:

توفّر app.config.globalProperties.$http الخاصية this.$http لـ Options API
لا يتضمن Composition API قيمة this، ولذلك يستخدم inject بدلًا منها
وفّروا خاصية عامة وقيمة متاحة بالحقن لتغطية الأسلوبين بالكامل
حدّدوا نوع this.$http عبر توسيع ComponentCustomProperties
استخدموا InjectionKey ذا نوع محدد لمسار inject

البدء مجانًا

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

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

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

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

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

هل درس «الخصائص العامة وprovide/inject في الإضافات» مجاني؟

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

ماذا ستتعلم في «الخصائص العامة وprovide/inject في الإضافات»؟

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

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

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

كم من الوقت يستغرق درس «الخصائص العامة وprovide/inject في الإضافات»؟

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

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

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

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

بنية الإضافات وapp.use()
الخصائص العامة وprovide/inject في الإضافات
مثال على إضافة الإشعارات وToast
نشر إضافات Vue وكتابة أنواعها

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