कंपोज़ेबल्स के साथ Vue.js में तर्क का पुन: उपयोग कैसे करें

प्रोग्रामिंग करते समय, अपने कोडबेस को संरचित करना महत्वपूर्ण है ताकि आप जहां संभव हो वहां कोड का पुन: उपयोग करें। डुप्लिकेटिंग कोड कोडबेस को फूला सकता है और डिबगिंग को जटिल बना सकता है, खासकर बड़े ऐप्स में।

Vue कंपोज़ेबल्स के माध्यम से कोड के पुन: उपयोग को सरल बनाता है। कंपोज़ेबल ऐसे फ़ंक्शंस हैं जो तर्क को समाहित करते हैं, और समान कार्यक्षमता को संभालने के लिए आप उन्हें अपने प्रोजेक्ट में पुन: उपयोग कर सकते हैं।

क्या यह हमेशा कंपोज़ेबल था?

Vue 3 द्वारा कंपोज़ेबल पेश करने से पहले, आप कोड को कैप्चर करने और अपने एप्लिकेशन के विभिन्न हिस्सों में इसका पुन: उपयोग करने के लिए मिक्सिन का उपयोग कर सकते थे। मिश्रण शामिल हैं Vue.js विकल्प जैसे डेटा, विधियाँ और जीवनचक्र हुक, कई घटकों में कोड का पुन: उपयोग सक्षम करना।

मिक्सिन बनाने के लिए, आप उन्हें अलग-अलग फाइलों में संरचित करते हैं और फिर मिक्सिन को जोड़कर उन्हें घटकों पर लागू करते हैं मिश्रण घटक के विकल्प ऑब्जेक्ट के भीतर संपत्ति। उदाहरण के लिए:

// 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;
 },
 },
};

यह कोड स्निपेट प्रपत्रों को मान्य करने के लिए मिश्रण की सामग्री दिखाता है। इस मिश्रण में दो डेटा गुण हैं-formData और प्रपत्रत्रुटियाँ-प्रारंभ में रिक्त मानों पर सेट करें।

formData फॉर्म के लिए इनपुट डेटा संग्रहीत करता है, जिसमें उपयोगकर्ता नाम और पासवर्ड फ़ील्ड को खाली के रूप में आरंभ किया जाता है। formErrors संभावित त्रुटि संदेशों को रखने के लिए इस संरचना को प्रतिबिंबित करता है, जो प्रारंभ में खाली भी होता है।

मिश्रण में एक विधि भी शामिल है, मान्य प्रपत्र(), यह जांचने के लिए कि उपयोगकर्ता नाम और पासवर्ड फ़ील्ड खाली नहीं हैं। यदि कोई भी फ़ील्ड खाली है, तो यह उचित त्रुटि संदेश के साथ formErrors डेटा प्रॉपर्टी को पॉप्युलेट करता है।

विधि वापस आती है सत्य वैध फॉर्म के लिए, जब formErrors खाली हो। आप मिक्सिन को अपने Vue घटक में आयात करके और विकल्प ऑब्जेक्ट की मिक्सिन प्रॉपर्टी में जोड़कर इसका उपयोग कर सकते हैं:

<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 घटक दिखाता है। मिश्रण संपत्ति में आपके द्वारा आयात किए गए सभी मिश्रण शामिल हैं। इस मामले में, घटक वैलिडेटफॉर्म विधि का उपयोग करता है formValidation मिक्सिन उपयोगकर्ता को यह सूचित करने के लिए कि फॉर्म सबमिशन सफल रहा या नहीं।

कंपोज़ेबल्स का उपयोग कैसे करें

कंपोजेबल एक स्व-निहित जावास्क्रिप्ट फ़ाइल है जिसमें विशिष्ट चिंताओं या आवश्यकताओं के अनुरूप कार्य होते हैं। आप लाभ उठा सकते हैं Vue की रचना API रेफ्स और कंप्यूटेड रेफ्स जैसी सुविधाओं का उपयोग करते हुए, एक कंपोज़ेबल के भीतर।

कंपोज़िशन एपीआई तक यह पहुंच आपको ऐसे फ़ंक्शन बनाने की अनुमति देती है जो विभिन्न घटकों में एकीकृत होते हैं। ये फ़ंक्शन एक ऑब्जेक्ट लौटाते हैं, जिसे आप कंपोज़िशन एपीआई के सेटअप फ़ंक्शन के माध्यम से आसानी से आयात और Vue घटकों में शामिल कर सकते हैं।

अपने प्रोजेक्ट में एक नई JavaScript फ़ाइल बनाएँ स्रोत कंपोज़ेबल का उपयोग करने के लिए निर्देशिका। बड़ी परियोजनाओं के लिए, src के भीतर एक फ़ोल्डर व्यवस्थित करने और अलग-अलग कंपोज़ेबल के लिए अलग जावास्क्रिप्ट फ़ाइलें बनाने पर विचार करें, यह सुनिश्चित करते हुए कि प्रत्येक कंपोज़ेबल का नाम उसके उद्देश्य को दर्शाता है।

जावास्क्रिप्ट फ़ाइल के अंदर, आपके लिए आवश्यक फ़ंक्शन को परिभाषित करें। यहाँ का पुनर्गठन है formValidation एक कंपोजेबल के रूप में मिश्रण:

// 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,
 };
}

यह स्निपेट प्रतिक्रियाशील फ़ंक्शन को आयात करने से शुरू होता है वीयूई पैकेट। इसके बाद यह एक निर्यात योग्य फ़ंक्शन बनाता है, फॉर्म सत्यापन() का उपयोग करें.

यह एक प्रतिक्रियाशील चर बनाकर जारी रहता है, राज्य, जिसमें formData और formErrors गुण मौजूद हैं। फिर स्निपेट मिक्सिन के समान दृष्टिकोण के साथ फॉर्म सत्यापन को संभालता है। अंत में, यह स्टेट वेरिएबल और वैलिडेटफॉर्म फ़ंक्शन को एक ऑब्जेक्ट के रूप में लौटाता है।

आप इस कंपोजेबल का उपयोग कर सकते हैं फ़ाइल से जावास्क्रिप्ट फ़ंक्शन आयात करना आपके घटक में:

<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>

यूज़फॉर्मवैलिडेशन कंपोज़ेबल को आयात करने के बाद, यह कोड जावास्क्रिप्ट ऑब्जेक्ट को नष्ट कर देता है यह वापस आता है और फॉर्म सत्यापन जारी रखता है। यह सचेत करता है कि सबमिट किया गया फॉर्म सफल है या उसमें त्रुटियाँ हैं।

कंपोज़ेबल्स नए मिक्सिन हैं

जबकि कोड के पुन: उपयोग के लिए मिक्सिन Vue 2 में उपयोगी थे, कंपोज़ेबल्स ने उन्हें Vue 3 में बदल दिया है। कंपोज़ेबल्स Vue.js अनुप्रयोगों में तर्क का पुन: उपयोग करने के लिए एक अधिक संरचित और रखरखाव योग्य दृष्टिकोण प्रदान करते हैं, जिससे Vue के साथ स्केलेबल वेब ऐप्स बनाना आसान हो जाता है।