Când programați, este important să vă structurați baza de cod, astfel încât să reutilizați codul acolo unde este posibil. Duplicarea codului poate umfla baza de cod și poate complica depanarea, în special în aplicațiile mai mari.
Vue simplifică reutilizarea codului prin composables. Composabilele sunt funcții care încapsulează logica și le puteți reutiliza în proiectul dvs. pentru a gestiona funcționalități similare.
Cuprins
A fost întotdeauna Composables?
Înainte ca Vue 3 să introducă composables, ați putea folosi mixuri pentru a captura codul și a-l reutiliza în diferite părți ale aplicației dvs. Mixins conțineau opțiuni Vue.js, cum ar fi date, metode și cârlige pentru ciclul de viață, permițând reutilizarea codului în mai multe componente.
Pentru a crea mixin-uri, le structurați în fișiere separate și apoi le aplicați componentelor adăugând mixin-ul la proprietatea mixins din obiectul opțiuni al componentei. De exemplu:
export const 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.';
}
return Object.keys(this.formErrors).length === 0;
},
},
};
Acest fragment de cod arată conținutul unui mixin pentru validarea formularelor. Acest mixin găzduiește două proprietăți de date—formData și formErrors—setate inițial la valori goale.
formData stochează datele de intrare pentru formular, inclusiv câmpurile pentru nume de utilizator și parolă inițializate ca goale. formErrors oglindește această structură pentru a păstra mesajele de eroare potențiale, de asemenea goale inițial.
Mixin-ul conține și o metodă, validateForm(), pentru a verifica dacă câmpurile de nume de utilizator și parolă nu sunt goale. Dacă oricare câmp este gol, acesta completează proprietatea de date formErrors cu un mesaj de eroare corespunzător.
Metoda returnează true pentru un formular valid, când formErrors este gol. Puteți utiliza mixin-ul importându-l în componenta Vue și adăugându-l la proprietatea mixin a obiectului Options:
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="formData.username" />
<span class="error">{{ formErrors.username }}</span>
</div><div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="formData.password" />
<span class="error">{{ formErrors.password }}</span>
</div><button type="submit">Submit</button>
</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>
Acest exemplu arată o componentă Vue scrisă folosind abordarea obiect Options. Proprietatea mixin include toate mixin-urile pe care le-ați importat. În acest caz, componenta folosește metoda validateForm din mixin-ul formValidation pentru a informa utilizatorul dacă trimiterea formularului a avut succes.
Cum se utilizează Composables
Un composable este un fișier JavaScript autonom cu funcții adaptate unor preocupări sau cerințe specifice. Puteți folosi API-ul de compoziție Vue într-un composable, folosind funcții precum refs și refs calculate.
Acest acces la API-ul de compoziție vă permite să creați funcții care se integrează în diverse componente. Aceste funcții returnează un obiect, pe care îl puteți importa și încorpora cu ușurință în componentele Vue prin funcția de configurare a API-ului Composition.
Creați un fișier JavaScript nou în directorul src al proiectului pentru a utiliza un composable. Pentru proiecte mai mari, luați în considerare organizarea unui folder în src și crearea de fișiere JavaScript separate pentru diferite composables, asigurându-vă că numele fiecărui composable reflectă scopul său.
În interiorul fișierului JavaScript, definiți funcția de care aveți nevoie. Iată o restructurare a mixin-ului formValidation ca compus compus:
import { reactive } from 'vue';export function useFormValidation() {
const state = reactive({
formData: {
username: '',
password: '',
},
formErrors: {
username: '',
password: '',
},
});function validateForm() {
state.formErrors = {};if (!state.formData.username.trim()) {
state.formErrors.username="Username is required.";
}if (!state.formData.password.trim()) {
state.formErrors.password = 'Password is required.';
}return Object.keys(state.formErrors).length === 0;
}return {
state,
validateForm,
};
}
Acest fragment începe prin importul funcției reactive din pachetul vue. Apoi creează o funcție exportabilă, useFormValidation().
Continuă prin crearea unei variabile reactive, state, care găzduiește proprietățile formData și formErrors. Fragmentul se ocupă apoi de validarea formularului cu o abordare foarte similară cu mixin-ul. În cele din urmă, returnează variabila de stare și funcția validateForm ca obiect.
Puteți utiliza acest composable importând funcția JavaScript din fișierul din componenta dvs.:
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="state.formData.username" />
<span class="error">{{ state.formErrors.username }}</span>
</div><div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="state.formData.password" />
<span class="error">{{ state.formErrors.password }}</span>
</div><button type="submit">Submit</button>
</form>
</div>
</template><script setup>
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>
După importul useFormValidation composable, acest cod destructura obiectul JavaScript pe care îl returnează și continuă cu validarea formularului. Avertizează dacă formularul trimis este un succes sau are erori.
Composables sunt noile mixine
În timp ce mixin-urile au fost utile în Vue 2 pentru reutilizarea codului, composables le-au înlocuit în Vue 3. Composables oferă o abordare mai structurată și mai ușor de întreținut pentru reutilizarea logicii în aplicațiile Vue.js, facilitând construirea de aplicații web scalabile cu Vue.