A programozás során fontos a kódbázis felépítése úgy, hogy lehetőség szerint újra felhasználja a kódot. A duplikált kód felduzzaszthatja a kódbázist, és bonyolíthatja a hibakeresést, különösen a nagyobb alkalmazásokban.
A Vue leegyszerűsíti a kód újrafelhasználását a kompozíciókon keresztül. Az összeállítható funkciók logikát magukba foglaló függvények, amelyeket a projektben újra felhasználhat hasonló funkciók kezelésére.
Tartalomjegyzék
Mindig összeállítható volt?
Mielőtt a Vue 3 bevezette volna az összeállítható elemeket, mixineket használhatott a kód rögzítésére, és az alkalmazás különböző részein történő újrafelhasználására. A keverékek Vue.js opciókat tartalmaztak, például adatokat, metódusokat és életciklus-horogokat, lehetővé téve a kód újrafelhasználását több összetevő között.
A mixinek létrehozásához külön fájlokba kell strukturálni őket, majd alkalmazni kell őket az összetevőkre úgy, hogy hozzáadja a mixint a mixin tulajdonsághoz az összetevő beállítási objektumán belül. Például:
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;
},
},
};
Ez a kódrészlet az űrlapok érvényesítésére szolgáló mixin tartalmát mutatja. Ez a mixin két adattulajdonságot tartalmaz – a formData és a formErrors – kezdetben üres értékekre állítva.
A formData az űrlap bemeneti adatait tárolja, beleértve az üresen inicializált felhasználónév- és jelszómezőket. A formErrors ezt a struktúrát tükrözi, hogy tárolja a potenciális hibaüzeneteket, amelyek kezdetben szintén üresek.
A mixin egy módszert is tartalmaz, a validateForm() annak ellenőrzésére, hogy a felhasználónév és jelszó mezők nem üresek. Ha bármelyik mező üres, akkor a formErrors adattulajdonságot egy megfelelő hibaüzenettel tölti fel.
A metódus igazat ad vissza érvényes űrlap esetén, ha a formErrors üres. A mixint úgy használhatja, hogy importálja a Vue komponensébe, és hozzáadja az Options objektum mixin tulajdonságához:
<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>
Ez a példa egy Vue-összetevőt mutat be, amelyet a Beállítások objektum megközelítéssel írtak. A mixins tulajdonság tartalmazza az összes importált mixint. Ebben az esetben az összetevő a formValidation mixin validteForm metódusát használja, hogy tájékoztassa a felhasználót arról, hogy az űrlap elküldése sikeres volt-e.
Hogyan használjuk a kompozíciókat
Az összeállítható egy önálló JavaScript-fájl, amelynek funkciói az adott szempontokhoz vagy követelményekhez vannak szabva. Kihasználhatja a Vue összetétel API-ját egy kompozíción belül, olyan funkciók használatával, mint a refs és a számított refs.
A kompozíció API-hoz való hozzáférés lehetővé teszi olyan funkciók létrehozását, amelyek különböző összetevőkbe integrálódnak. Ezek a függvények egy objektumot adnak vissza, amelyet könnyen importálhat és beépíthet a Vue-összetevőkbe a Composition API beállítási funkcióján keresztül.
Hozzon létre egy új JavaScript-fájlt a projekt src-könyvtárában az összeállítható fájl használatához. Nagyobb projektek esetén fontolja meg egy mappa megszervezését az src-n belül, és külön JavaScript-fájlok létrehozását a különböző kompozíciókhoz, biztosítva, hogy az egyes kompozíciók neve tükrözze a célját.
A JavaScript fájlban határozza meg a kívánt függvényt. Íme a formValidation mixin átstrukturálása összeállítható:
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,
};
}
Ez a részlet a reaktív függvény importálásával kezdődik a vue-csomagból. Ezután létrehoz egy exportálható függvényt, a useFormValidation().
Egy reaktív változó, állapot létrehozásával folytatódik, amely a formData és a formErrors tulajdonságokat tartalmazza. A kódrészlet ezután a mixinhez nagyon hasonló megközelítéssel kezeli az űrlap érvényesítését. Végül objektumként adja vissza az állapotváltozót és a validateForm függvényt.
Ezt az összeállítást úgy használhatja, hogy importálja a JavaScript függvényt az összetevő fájljából:
<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>
A useFormValidation kompozíció importálása után ez a kód megsemmisíti a visszaadott JavaScript objektumot, és folytatja az űrlap érvényesítését. Figyelmeztet, hogy a beküldött űrlap sikeres volt-e vagy hibákat tartalmaz.
A kompozíciók az új mixek
Míg a mixinek hasznosak voltak a Vue 2-ben a kód újrafelhasználásához, a Vue 3-ban az összeállíthatók váltották fel őket. A Composable-ok strukturáltabb és karbantarthatóbb megközelítést biztosítanak a logika újrafelhasználásához a Vue.js alkalmazásokban, megkönnyítve a méretezhető webalkalmazások Vue-val történő létrehozását.