Come riutilizzare la logica in Vue.js con i componenti componibili

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.

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. Mixine contenute Opzioni Vue.js come dati, metodi e hook del ciclo di vita, consentendo il riutilizzo del codice tra più componenti.

Per creare mixin, strutturarli in file separati e quindi applicarli ai componenti aggiungendo il mixin al file mixin proprietà all'interno dell'oggetto opzioni del componente. Per esempio:

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

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 impostato 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 ritorna VERO 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>
<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>

Questo esempio mostra un componente Vue scritto utilizzando l'approccio dell'oggetto Options. IL mixin La proprietà include tutti i mixin che hai importato. In questo caso, il componente utilizza il metodo validateForm da formValidation mixin per informare l'utente se l'invio del modulo ha avuto successo.

Come utilizzare i componenti componibili

Un componibile è un file JavaScript autonomo con funzioni su misura per preoccupazioni o requisiti specifici. Puoi fare leva 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 nel tuo progetto src directory per utilizzare un 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:

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

Questo frammento inizia importando la funzione reattiva dal file vista pacchetto. Quindi crea una funzione esportabile, useFormValidation().

Continua creando una variabile reattiva, stato, 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 tramite importando la funzione JavaScript dal file nel tuo componente:

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

Dopo aver importato il componibile useFormValidation, questo codice destruttura l'oggetto JavaScript ritorna e prosegue con la validazione del form. Avvisa se il modulo inviato ha esito positivo o presenta errori.

I componibili sono i nuovi mixin

Mentre i mixin erano utili in Vue 2 per il riutilizzo del codice, i componenti componibili li hanno sostituiti in Vue 3. I componenti 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.