تحرر من حفر Vue Prop مع العرض/الحقن

تقدم Vue عدة طرق لإدارة تدفق البيانات والتواصل بين المكونات. التحدي الشائع كمطور Vue هو حفر الدعامات، حيث تقوم بتمرير البيانات عبر طبقات مختلفة من المكونات، مما يؤدي إلى قاعدة تعليمات برمجية معقدة وأقل قابلية للصيانة.

تقدم Vue آلية التوريد/الحقن، وهي حل نظيف لدعم الحفر. يساعد التقديم/الحقن في إدارة اتصالات البيانات بين الوالدين والمكونات الفرعية المتداخلة بعمق.

فهم مشكلة الحفر الدعامة

قبل الخوض في حل العرض/الحقن، من المهم فهم المشكلة. يحدث حفر العناصر عندما تحتاج إلى تمرير البيانات من مكون أصلي ذي مستوى أعلى إلى مكون فرعي متداخل بعمق.

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

خذ بعين الاعتبار التسلسل الهرمي للمكونات التالية كمثال:

• برنامج
  • ParentComponent
    • مكون الطفل
      • GrandChildComponent

لنفترض أن البيانات من برنامج

يحتاج المكون للوصول إلى GrandChildComponent. في هذه الحالة، ستحتاج إلى تمريرها عبر المكونين الوسيطين باستخدام الخاصيات، حتى لو لم تكن هذه المكونات بحاجة إلى البيانات نفسها لتعمل بشكل صحيح. يمكن أن يؤدي هذا إلى تعليمات برمجية متضخمة يصعب تصحيحها.

ما هو تقديم / حقن؟

يعالج Vue هذه المشكلة مع تقديم / حقن الميزة، التي تسمح للمكون الأصلي بتوفير البيانات أو الوظائف للمكونات التابعة له، بغض النظر عن مدى تداخلها. يعمل هذا الحل على تبسيط مشاركة البيانات وتحسين تنظيم التعليمات البرمجية.

مكون الموفر

يهدف مكون الموفر إلى مشاركة البيانات أو الأساليب مع أحفاده. يستخدم يمد الخيار لجعل هذه البيانات متاحة لأطفالها. فيما يلي مثال لمكون الموفر:

<template>
<div>

<ParentComponent/>
div>
template>
<scriptsetup>
import { provide } from 'vue';
import ParentComponent from './components/ParentComponent.vue';
const greeting = 'Hello from Provider';
provide('greeting', greeting);
script>

تُظهر كتلة التعليمات البرمجية هذه مكون الموفر، برنامج، الذي يوفر أ تحية متغير لجميع مكوناته السليلة. لتوفير متغير، تحتاج إلى تعيين مفتاح. يساعد تعيين المفتاح بنفس اسم المتغير في الحفاظ على إمكانية صيانة التعليمات البرمجية الخاصة بك.

مكونات السليل

المكونات السليلة هي مكونات داخل بنية متداخلة. يمكنهم حقن واستخدام البيانات المقدمة في مثيل المكون الخاص بهم. وإليك كيف يتم ذلك:

<scriptsetup>
import { inject } from 'vue';
const injectedData = inject('greeting');
script>

يقوم المكون التابع بإدخال البيانات المقدمة ويمكنه الوصول إليها داخل القالب الخاص به كمتغير محدد محليًا.

والآن تأمل الصورة أدناه:

في هذه الصورة، يمكنك رؤية تسلسل هرمي لأربعة مكونات، بدءًا من المكون الجذري الذي يعمل كنقطة البداية. تتداخل المكونات الأخرى داخل التسلسل الهرمي، وتنتهي بـ حفيد عنصر.

يتلقى مكون GrandChild البيانات التي يوفرها مكون التطبيق. باستخدام هذه الآلية، يمكنك تجنب تمرير البيانات عبر الأبوين و طفل المكونات، حيث أن هذه المكونات لا تحتاج إلى البيانات لتعمل بشكل صحيح.

توفير البيانات على مستوى التطبيق (العالمي).

يمكنك توفير البيانات على مستوى التطبيق من خلال تقديم/حقن Vue. هذه حالة استخدام شائعة لمشاركة البيانات والتكوين عبر مكونات مختلفة داخل تطبيق Vue الخاص بك.

فيما يلي مثال لكيفية توفير البيانات على مستوى التطبيق:

// main.js
import { createApp } from'vue'
import App from'./App.vue'
const globalConfig = {
 apiUrl: 'https://example.com/api',
 authKey: 'my-secret-key',
// Other configuration settings...
};
app.provide('globalConfig', globalConfig);
createApp(App).mount('#app')

لنفترض أن لديك تطبيقًا يتطلب كائن تكوين عام يحتوي على واجهة برمجة التطبيقات (API) نقاط النهاية ومعلومات مصادقة المستخدم والإعدادات الأخرى.

يمكنك تحقيق ذلك من خلال توفير بيانات التكوين في مكون المستوى الأعلى، عادةً في ملف main.js الملف، مما يسمح للمكونات الأخرى بحقنه واستخدامه:

<template>
<div>
<h1>API Settingsh1>
<p>API URL: {{ globalConfig.apiUrl }}p>
<p>Authentication Key: {{ globalConfig.authKey }}p>
div>
template>
<scriptsetup>
import { inject } from 'vue';
const globalConfig = inject('globalConfig');
script>

يستخدم المكون أعلاه حقن وظيفة للوصول إلى التكوين العالمي الكائن الذي يوفره التطبيق على المستوى العالمي. يمكنك الوصول إلى أي خصائص أو إعدادات من globalConfig عن طريق استيفاء هذه الخصائص أو ربطها بها تقنيات ربط البيانات المختلفة في Vue داخل المكون.

فوائد واستخدامات العرض والحقن

فيما يلي بعض الفوائد والاستخدامات المهمة لميزة التقديم/الحقن عند إنشاء تطبيقات الويب في Vue.

كود أنظف وأكثر أداءً

استخدام تقديم / حقن، فأنت تزيل الحاجة إلى المكونات الوسيطة لتمرير البيانات التي لا تستخدمها. يؤدي هذا إلى تعليمات برمجية أكثر وضوحًا وقابلية للصيانة عن طريق تقليل إعلانات الدعامات غير الضرورية.

كما يضمن نظام التفاعل في Vue إعادة عرض المكونات فقط عندما تتغير تبعياتها. يتيح العرض/الحقن مشاركة البيانات بكفاءة، مما قد يؤدي إلى تحسين الأداء عن طريق تقليل عمليات إعادة العرض غير الضرورية.

تحسين تغليف المكونات

يؤدي توفير/حقن إلى تعزيز تغليف المكونات بشكل أفضل. تحتاج المكونات الفرعية فقط إلى القلق بشأن البيانات التي تستخدمها بشكل صريح، مما يقلل من اعتمادها على بنية البيانات المحددة للمكونات الأصلية.

فكر في مكون منتقي التاريخ الذي يعتمد على إعدادات تنسيق التاريخ المترجمة. بدلاً من تمرير هذه الإعدادات كدعائم، يمكنك توفيرها داخل المكون الأصلي وإدخالها فقط في مكون منتقي التاريخ. وهذا يؤدي إلى فصل أوضح بين الاهتمامات.

حقن التبعية

يمكن أن يكون تقديم/حقن بمثابة شكل بسيط من أشكال حقن التبعية، مما يجعل الخدمات والإعدادات العالمية مثل عملاء API أو نقاط النهاية أو تفضيلات المستخدم أو مخازن البيانات - متاحة بسهولة لأي مكون يحتاج إليها. وهذا يضمن تكوينات متسقة عبر تطبيقك.

النقاط الأساسية التي يجب مراعاتها عند استخدام التوفير والحقن

بينما ال تقديم / حقن توفر الآلية العديد من المزايا، ويجب عليك استخدامها بعناية لتجنب الآثار الجانبية غير المرغوب فيها.

• يستخدم تقديم / حقن لمشاركة البيانات أو الوظائف المهمة المطلوبة عبر التسلسل الهرمي للمكونات مثل التكوين أو مفاتيح واجهة برمجة التطبيقات. الإفراط في استخدامه يمكن أن يجعل علاقات المكونات الخاصة بك معقدة للغاية.
• قم بتوثيق ما يوفره مكون الموفر وما هي المكونات التابعة التي يجب حقنها. وهذا يساعد في فهم المكونات الخاصة بك والحفاظ عليها، خاصة عند العمل ضمن فرق.
• كن حذرًا بشأن إنشاء حلقات التبعية، حيث يوفر المكون الفرعي شيئًا يقوم المكون الأصلي بإدخاله. سيؤدي هذا إلى أخطاء وسلوك غير متوقع.

هل يعتبر توفير/حقن الخيار الأفضل لإدارة الحالة في Vue؟

يعد توفير/حقن ميزة مفيدة أخرى في Vue لإدارة تدفق البيانات وحالتها عبر المكونات. يأتي العرض/الحقن بنصيبه من الجوانب السلبية. يمكن أن يؤدي التوفير/الحقن إلى تحديات في تصحيح الأخطاء واختبار وصيانة التطبيقات واسعة النطاق.

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