Vue.js'de Mantık Oluşturulabilir Öğelerle Yeniden Kullanma

Programlama yaparken kod tabanınızı, mümkün olan yerlerde kodu yeniden kullanacak şekilde yapılandırmak önemlidir. Kodun kopyalanması, özellikle büyük uygulamalarda kod tabanını şişirebilir ve hata ayıklamayı karmaşık hale getirebilir.

Vue, oluşturulabilir öğeler aracılığıyla kodun yeniden kullanımını basitleştirir. Oluşturulabilir öğeler, mantığı kapsayan işlevlerdir ve benzer işlevleri gerçekleştirmek için bunları projenizde yeniden kullanabilirsiniz.

Her Zaman Şekillendirilebilir miydi?

Vue 3 şekillendirilebilir öğeleri sunmadan önce, kodu yakalamak ve uygulamanızın farklı bölümlerinde yeniden kullanmak için karışımları kullanabiliyordunuz. İçerdiği karışımlar Veriler, yöntemler ve yaşam döngüsü kancaları gibi Vue.js seçenekleri, birden çok bileşende kodun yeniden kullanılmasına olanak tanır.

Karışımlar oluşturmak için bunları ayrı dosyalarda yapılandırın ve ardından bunları karışıma ekleyerek bileşenlere uygulayın.

karışımlar bileşenin seçenekler nesnesindeki özellik. Örneğin:

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

Bu kod pasajı, formları doğrulamak için bir karışımın içeriğini gösterir. Bu karışım iki veri özelliğini barındırır:form verisi Ve formHataları—başlangıçta boş değerlere ayarlandı.

formData, boş olarak başlatılan kullanıcı adı ve parola alanları da dahil olmak üzere forma ilişkin giriş verilerini depolar. formErrors, başlangıçta boş olan potansiyel hata mesajlarını tutmak için bu yapıyı yansıtır.

Karışım aynı zamanda bir yöntem içerir, validateForm()Kullanıcı adı ve şifre alanlarının boş olmadığını kontrol etmek için. Alanlardan herhangi biri boşsa formErrors veri özelliğini uygun bir hata mesajıyla doldurur.

Yöntem geri döner doğru geçerli bir form için formErrors boş olduğunda. Karışımı Vue bileşeninize aktararak ve Options nesnesinin mixin özelliğine ekleyerek kullanabilirsiniz:

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

Bu örnek, Options nesne yaklaşımı kullanılarak yazılmış bir Vue bileşenini göstermektedir. karışımlar özelliği, içe aktardığınız tüm karışımları içerir. Bu durumda bileşen, validateForm yöntemini kullanır. formDoğrulama form gönderiminin başarılı olup olmadığını kullanıcıya bildirmek için mixin.

Şekillendirilebilir Malzemeler Nasıl Kullanılır?

Oluşturulabilir, belirli endişelere veya gereksinimlere göre uyarlanmış işlevlere sahip, bağımsız bir JavaScript dosyasıdır. Kaldıraç kullanabilirsiniz Vue'nun kompozisyon API'si ref'ler ve hesaplanmış referanslar gibi özellikleri kullanarak birleştirilebilir içinde.

Kompozisyon API'sine bu erişim, çeşitli bileşenlerle bütünleşen işlevler oluşturmanıza olanak tanır. Bu işlevler, Composition API'nin kurulum işlevi aracılığıyla kolayca içe aktarabileceğiniz ve Vue bileşenlerine dahil edebileceğiniz bir nesne döndürür.

Projenizde yeni bir JavaScript dosyası oluşturun kaynak bir oluşturulabilirin kullanılacağı dizin. Daha büyük projeler için, src içinde bir klasör düzenlemeyi ve farklı oluşturulabilir dosyalar için ayrı JavaScript dosyaları oluşturmayı düşünün; böylece her oluşturulabilirin adının amacını yansıttığından emin olun.

JavaScript dosyasının içinde ihtiyacınız olan işlevi tanımlayın. İşte yeniden yapılanma formDoğrulama şekillendirilebilir olarak karıştırma:

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

Bu kod parçası, reaktif işlevin içe aktarılmasıyla başlar. görüntü paket. Daha sonra dışa aktarılabilir bir işlev oluşturur, useFormValidation().

Reaktif bir değişken oluşturarak devam eder, durumformData ve formErrors özelliklerini barındıran. Snippet daha sonra form doğrulamayı mixin'e çok benzer bir yaklaşımla ele alır. Son olarak durum değişkenini ve validateForm işlevini bir nesne olarak döndürür.

Bu oluşturucuyu şu şekilde kullanabilirsiniz: JavaScript işlevini dosyadan içe aktarma bileşeninizde:

<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 oluşturulabilir dosyasını içe aktardıktan sonra bu kod JavaScript nesnesinin yapısını bozar geri döner ve form doğrulama işlemine devam eder. Gönderilen formun başarılı olup olmadığı veya hatalı olup olmadığı konusunda uyarı verir.

Şekillendirilebilir Malzemeler Yeni Karışımlardır

Karışımlar Vue 2'de kodun yeniden kullanımı açısından faydalı olsa da, Vue 3'te bunların yerini birleştirilebilirler almıştır. Oluşturulabilir öğeler, Vue.js uygulamalarındaki mantığın yeniden kullanılmasına yönelik daha yapılandırılmış ve sürdürülebilir bir yaklaşım sunarak Vue.js ile ölçeklenebilir web uygulamaları oluşturmayı kolaylaştırır.