Når du programmerer, er det vigtigt at strukturere din kodebase, så du genbruger kode, hvor det er muligt. Duplikering af kode kan blæse kodebasen op og komplicere fejlfinding, især i større apps.
Vue forenkler genbrug af kode gennem composables. Composables er funktioner, der indkapsler logik, og du kan genbruge dem på tværs af dit projekt til at håndtere lignende funktionalitet.
Indholdsfortegnelse
Var det altid komponerbare?
Før Vue 3 introducerede composables, kunne du bruge mixins til at fange kode og genbruge den i forskellige dele af din applikation. Mixins indeholdt Vue.js-muligheder såsom data, metoder og livscyklushooks, hvilket muliggjorde genbrug af kode på tværs af flere komponenter.
For at oprette mixins skal du strukturere dem i separate filer og derefter anvende dem på komponenter ved at tilføje mixin til mixins-egenskaben i komponentens option-objekt. For eksempel:
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;
},
},
};
Dette kodestykke viser indholdet af et mixin til validering af formularer. Denne blanding rummer to dataegenskaber – formData og formErrors – som oprindeligt er sat til tomme værdier.
formData gemmer inputdata til formularen, inklusive brugernavn og adgangskode felter initialiseret som tomme. formErrors afspejler denne struktur for at holde potentielle fejlmeddelelser, også i starten tomme.
Blandingen indeholder også en metode, validateForm(), til at kontrollere, at brugernavn- og adgangskodefelterne ikke er tomme. Hvis et af felterne er tomt, udfylder det formErrors-dataegenskaben med en passende fejlmeddelelse.
Metoden returnerer true for en gyldig formular, når formErrors er tom. Du kan bruge mixin ved at importere den til din Vue-komponent og tilføje den til mixin-egenskaben for Options-objektet:
<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>
Dette eksempel viser en Vue-komponent skrevet ved hjælp af Options-objekttilgangen. Mixins-egenskaben inkluderer alle de mixins, du har importeret. I dette tilfælde bruger komponenten validateForm-metoden fra formValidation-mixin til at informere brugeren om, hvorvidt formularindsendelsen lykkedes.
Sådan bruges kompositabler
En composable er en selvstændig JavaScript-fil med funktioner, der er skræddersyet til specifikke bekymringer eller krav. Du kan udnytte Vues sammensætnings-API i en komponerbar, ved at bruge funktioner som refs og beregnede refs.
Denne adgang til sammensætnings-API’en giver dig mulighed for at oprette funktioner, der integreres i forskellige komponenter. Disse funktioner returnerer et objekt, som du nemt kan importere og inkorporere i Vue-komponenter gennem opsætningsfunktionen i Composition API.
Opret en ny JavaScript-fil i dit projekts src-mappe for at bruge en komponerbar. For større projekter kan du overveje at organisere en mappe i src og oprette separate JavaScript-filer til forskellige komponabler, og sikre dig, at hver komponibels navn afspejler dens formål.
Inde i JavaScript-filen skal du definere den funktion, du har brug for. Her er en omstrukturering af formValidation mixin som en komponibel:
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,
};
}
Dette uddrag begynder med at importere den reaktive funktion fra vue-pakken. Det opretter derefter en eksporterbar funktion, useFormValidation().
Det fortsætter ved at skabe en reaktiv variabel, tilstand, som huser egenskaberne formData og formErrors. Uddraget håndterer derefter formularvalideringen med en meget lignende tilgang til mixin. Til sidst returnerer den tilstandsvariablen og validateForm-funktionen som et objekt.
Du kan bruge denne komponerbare ved at importere JavaScript-funktionen fra filen i din komponent:
<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>
Efter import af useFormValidation composable, destrukturerer denne kode JavaScript-objektet, det returnerer, og fortsætter med formularvalideringen. Den advarer, om den indsendte formular er en succes eller har fejl.
Composables er de nye mixins
Mens mixins var nyttige i Vue 2 til kodegenbrug, har composables erstattet dem i Vue 3. Composables giver en mere struktureret og vedligeholdelig tilgang til genbrug af logik i Vue.js-applikationer, hvilket gør det nemmere at bygge skalerbare webapps med Vue.