Vid programmering är det viktigt att strukturera din kodbas så att du återanvänder kod där det är möjligt. Duplicering av kod kan svälla kodbasen och komplicera felsökning, särskilt i större appar.
Vue förenklar kodåteranvändning genom kompositer. Composables är funktioner som kapslar in logik, och du kan återanvända dem i hela ditt projekt för att hantera liknande funktionalitet.
Innehållsförteckning
Var det alltid kompositioner?
Innan Vue 3 introducerade composables kunde du använda mixins för att fånga kod och återanvända den i olika delar av din applikation. Mixins innehöll Vue.js-alternativ som data, metoder och livscykelhakar, vilket möjliggör återanvändning av kod över flera komponenter.
För att skapa mixins strukturerar du dem i separata filer och applicerar dem sedan på komponenter genom att lägga till mixin till mixins-egenskapen i komponentens optionsobjekt. Till exempel:
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;
},
},
};
Detta kodavsnitt visar innehållet i en mixin för validering av formulär. Denna mixin innehåller två dataegenskaper – formData och formErrors – som ursprungligen ställts in på tomma värden.
formData lagrar indata för formuläret, inklusive användarnamn och lösenordsfält initialiserade som tomma. formErrors speglar denna struktur för att hålla potentiella felmeddelanden, även initialt tomma.
Blandningen innehåller också en metod, validateForm(), för att kontrollera att användarnamn och lösenordsfälten inte är tomma. Om något av fälten är tomt, fyller det i formErrors dataegenskapen med ett lämpligt felmeddelande.
Metoden returnerar true för ett giltigt formulär när formErrors är tomt. Du kan använda mixin genom att importera den till din Vue-komponent och lägga till den i mixin-egenskapen för 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>
Det här exemplet visar en Vue-komponent skriven med Options-objektmetoden. Mixins-egenskapen inkluderar alla mixins du har importerat. I det här fallet använder komponenten metoden validateForm från formValidation-mixin för att informera användaren om huruvida formulärinlämningen lyckades.
Hur man använder kompositer
En composable är en fristående JavaScript-fil med funktioner som är skräddarsydda för specifika problem eller krav. Du kan utnyttja Vues kompositions-API i en komponerbar, med funktioner som refs och beräknade refs.
Denna åtkomst till kompositions-API:et låter dig skapa funktioner som integreras i olika komponenter. Dessa funktioner returnerar ett objekt, som du enkelt kan importera och införliva i Vue-komponenter genom inställningsfunktionen i Composition API.
Skapa en ny JavaScript-fil i ditt projekts src-katalog för att använda en komponerbar. För större projekt kan du överväga att organisera en mapp inom src och skapa separata JavaScript-filer för olika kompositioner, och se till att varje kompositions namn återspeglar dess syfte.
Inuti JavaScript-filen, definiera den funktion du behöver. Här är en omstrukturering av formValidation mixin som en komponerbar:
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,
};
}
Detta utdrag börjar med att importera den reaktiva funktionen från vue-paketet. Den skapar sedan en exporterbar funktion, useFormValidation().
Det fortsätter genom att skapa en reaktiv variabel, tillstånd, som innehåller formData- och formErrors-egenskaperna. Utdraget hanterar sedan formulärvalideringen med ett mycket liknande tillvägagångssätt som mixin. Slutligen returnerar den tillståndsvariabeln och funktionen validateForm som ett objekt.
Du kan använda denna komponerbara genom att importera JavaScript-funktionen från 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 att ha importerat useFormValidation composable, destrukturerar den här koden JavaScript-objektet som det returnerar och fortsätter med formulärvalideringen. Den varnar om det inskickade formuläret är framgångsrikt eller innehåller fel.
Composables är de nya mixinerna
Medan mixins var användbara i Vue 2 för kodåteranvändning, har kompositer ersatta dem i Vue 3. Composables ger en mer strukturerad och underhållbar metod för att återanvända logik i Vue.js-applikationer, vilket gör det lättare att bygga skalbara webbappar med Vue.