Durante la programmazione, è importante strutturare la base di codice in modo da riutilizzare il codice ove possibile. La duplicazione del codice può gonfiare la codebase e complicare il debug, soprattutto nelle app più grandi.
Vue semplifica il riutilizzo del codice attraverso i componenti componibili. I componenti componibili sono funzioni che incapsulano la logica e puoi riutilizzarle nel tuo progetto per gestire funzionalità simili.
Sommario:
Sono sempre stati componibili?
Prima che Vue 3 introducesse i componenti componibili, potevi utilizzare i mixin per acquisire codice e riutilizzarlo in diverse parti della tua applicazione. I mixin contenevano opzioni Vue.js come dati, metodi e hook del ciclo di vita, consentendo il riutilizzo del codice su più componenti.
Per creare mixin, strutturarli in file separati e quindi applicarli ai componenti aggiungendo il mixin alla proprietà mixins all’interno dell’oggetto opzioni del componente. Per esempio:
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;
},
},
};
Questo frammento di codice mostra il contenuto di un mixin per la convalida dei moduli. Questo mixin ospita due proprietà dei dati, formData e formErrors, inizialmente impostate su valori vuoti.
formData memorizza i dati di input per il modulo, inclusi i campi nome utente e password inizializzati come vuoti. formErrors rispecchia questa struttura per contenere potenziali messaggi di errore, anche inizialmente vuoti.
Il mixin contiene anche un metodo, validateForm(), per verificare che i campi nome utente e password non siano vuoti. Se uno dei campi è vuoto, popola la proprietà dati formErrors con un messaggio di errore appropriato.
Il metodo restituisce true per un modulo valido, quando formErrors è vuoto. Puoi utilizzare il mixin importandolo nel tuo componente Vue e aggiungendolo alla proprietà mixin dell’oggetto Opzioni:
<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>
Questo esempio mostra un componente Vue scritto utilizzando l’approccio dell’oggetto Options. La proprietà mixins include tutti i mixin che hai importato. In questo caso, il componente utilizza il metodo validateForm dal mixin formValidation per informare l’utente se l’invio del modulo ha avuto esito positivo.
Come utilizzare i componenti componibili
Un componibile è un file JavaScript autonomo con funzioni su misura per preoccupazioni o requisiti specifici. Puoi sfruttare l’API di composizione di Vue all’interno di un componibile, utilizzando funzionalità come riferimenti e riferimenti calcolati.
Questo accesso all’API di composizione consente di creare funzioni che si integrano in vari componenti. Queste funzioni restituiscono un oggetto che puoi facilmente importare e incorporare nei componenti Vue tramite la funzione di configurazione dell’API Composition.
Crea un nuovo file JavaScript nella directory src del tuo progetto per utilizzare un componente componibile. Per progetti più grandi, considera l’organizzazione di una cartella all’interno di src e la creazione di file JavaScript separati per diversi componenti componibili, assicurandoti che il nome di ciascun componibile ne rifletta lo scopo.
All’interno del file JavaScript, definisci la funzione richiesta. Ecco una ristrutturazione del formValidation mixin come componibile:
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,
};
}
Questo frammento inizia importando la funzione reactive dal pacchetto vue. Quindi crea una funzione esportabile, useFormValidation().
Continua creando una variabile reattiva, state, che ospita le proprietà formData e formErrors. Lo snippet gestisce quindi la validazione del form con un approccio molto simile al mixin. Infine, restituisce la variabile di stato e la funzione validateForm come oggetto.
Puoi utilizzare questo componibile importando la funzione JavaScript dal file nel tuo componente:
<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>
Dopo aver importato il componibile useFormValidation, questo codice destruttura l’oggetto JavaScript che restituisce e prosegue con la validazione del form. Avvisa se il modulo inviato ha esito positivo o presenta errori.
I componibili sono i nuovi mixin
Sebbene i mixin fossero utili in Vue 2 per il riutilizzo del codice, i componenti componibili li hanno sostituiti in Vue 3. I componibili forniscono un approccio più strutturato e gestibile al riutilizzo della logica nelle applicazioni Vue.js, semplificando la creazione di app Web scalabili con Vue.