كيفية إعادة استخدام المنطق في Vue.js مع المواد المركبة

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

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

هل كانت دائمًا قابلة للتركيب؟

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

لإنشاء mixins، يمكنك تنظيمها في ملفات منفصلة ثم تطبيقها على المكونات عن طريق إضافة mixin إلى ملف mixins الخاصية ضمن كائن خيارات المكون. على سبيل المثال:

// formValidation.js
exportconst formValidationMixin = {
 data() {
return {
 formData: {
 username: '',
 password: '',
 },
 formErrors: {
 username: '',
 password: '',
 },
 };
 },
 methods: {
 validateForm() {
this.formErrors = {};

if (!this.formData.username.trim()) {
this.formErrors.username = 'Username is required.';
 }

if (!this.formData.password.trim()) {
this.formErrors.password = 'Password is required.';
 }

returnObject.keys(this.formErrors).length 0;
 },
 },
};

يعرض مقتطف الكود هذا محتويات المزيج للتحقق من صحة النماذج. يحتوي هذا المزيج على خاصيتين للبيانات—بيانات النموذج و formErrors- تم ضبطه مبدئيًا على القيم الفارغة.

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

يحتوي المزيج أيضًا على طريقة، نموذج التحقق ()للتأكد من أن حقلي اسم المستخدم وكلمة المرور ليسا فارغين. إذا كان أي من الحقلين فارغًا، فسيتم ملء خاصية بيانات formErrors برسالة خطأ مناسبة.

تعود الطريقة حقيقي لنموذج صالح، عندما يكون formErrors فارغًا. يمكنك استخدام mixin عن طريق استيراده إلى مكون Vue الخاص بك وإضافته إلى خاصية mixin لكائن Options:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="formData.username" />
<spanclass="error">{{ formErrors.username }}span>
div>
<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="formData.password" />
<spanclass="error">{{ formErrors.password }}span>
div>
<buttontype="submit">Submitbutton>
form>
div>
template>
<script>
import { formValidation } from "./formValidation.js";
export default {
 mixins: [formValidation],
 methods: {
 submitForm() {
 if (this.validateForm()) {
 alert("Form submitted successfully!");
 } else {
 alert("Please correct the errors in the form.");
 }
 },
 },
};
script>
<style>
.error {
 color: red;
}
style>

يوضح هذا المثال مكون Vue مكتوبًا باستخدام أسلوب كائن الخيارات. ال mixins تتضمن الخاصية جميع الخلطات التي قمت باستيرادها. في هذه الحالة، يستخدم المكون أسلوب validateForm من formValidation mixin لإعلام المستخدم ما إذا كان إرسال النموذج ناجحًا.

كيفية استخدام المواد المركبة

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

يتيح لك الوصول إلى واجهة برمجة التطبيقات للتكوين إنشاء وظائف تتكامل مع المكونات المختلفة. تُرجع هذه الوظائف كائنًا، والذي يمكنك بسهولة استيراده ودمجه في مكونات Vue من خلال وظيفة الإعداد الخاصة بـ Composition API.

قم بإنشاء ملف JavaScript جديد في ملف مشروعك src الدليل لاستخدام Composable. بالنسبة للمشروعات الأكبر حجمًا، فكر في تنظيم مجلد داخل src وإنشاء ملفات JavaScript منفصلة لمختلف المواد القابلة للتركيب، مما يضمن أن اسم كل مادة قابلة للتركيب يعكس الغرض منها.

داخل ملف JavaScript، حدد الوظيفة التي تحتاجها. وهنا إعادة هيكلة formValidation mixin كمركب:

// formValidation.js
import { reactive } from'vue';
exportfunctionuseFormValidation() {
const state = reactive({
 formData: {
 username: '',
 password: '',
 },
 formErrors: {
 username: '',
 password: '',
 },
 });
functionvalidateForm() {
 state.formErrors = {};
if (!state.formData.username.trim()) {
 state.formErrors.username = 'Username is required.';
 }
if (!state.formData.password.trim()) {
 state.formErrors.password = 'Password is required.';
 }
returnObject.keys(state.formErrors).length 0;
 }
return {
 state,
 validateForm,
 };
}

يبدأ هذا المقتطف باستيراد الوظيفة التفاعلية من ملف vue طَرد. ثم يقوم بإنشاء وظيفة قابلة للتصدير، استخدامFormValidation ().

ويستمر عن طريق إنشاء متغير رد الفعل، ولاية، الذي يضم خصائص formData وformErrors. يتعامل المقتطف بعد ذلك مع التحقق من صحة النموذج بطريقة مشابهة جدًا للخلط. وأخيرًا، تقوم بإرجاع متغير الحالة والدالة validateForm ككائن.

يمكنك استخدام هذا التركيب بواسطة استيراد وظيفة JavaScript من الملف في المكون الخاص بك:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="state.formData.username" />
<spanclass="error">{{ state.formErrors.username }}span>
div>
<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="state.formData.password" />
<spanclass="error">{{ state.formErrors.password }}span>
div>
<buttontype="submit">Submitbutton>
form>
div>
template>
<scriptsetup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();
const submitForm = () => {
 if (validateForm()) {
 alert("Form submitted successfully!");
 } else {
 alert("Please correct the errors in the form.");
 }
};
script>
<style>
.error {
 color: red;
}
style>

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

المواد المركبة هي Mixins الجديدة

في حين أن عمليات المزج كانت مفيدة في Vue 2 لإعادة استخدام التعليمات البرمجية، فقد حلت المواد القابلة للتركيب محلها في Vue 3. توفر العناصر القابلة للتركيب أسلوبًا أكثر تنظيمًا وقابلية للصيانة لإعادة استخدام المنطق في تطبيقات Vue.js، مما يسهل إنشاء تطبيقات ويب قابلة للتطوير باستخدام Vue.