Při programování je důležité strukturovat kódovou základnu tak, abyste kód znovu používali, kde je to možné. Duplikování kódu může nafouknout kódovou základnu a zkomplikovat ladění, zejména ve větších aplikacích.
Vue zjednodušuje opětovné použití kódu prostřednictvím komposovatelných položek. Composables jsou funkce, které zapouzdřují logiku, a můžete je znovu použít ve svém projektu ke zpracování podobných funkcí.
Table of Contents
Bylo to vždy složitelné?
Předtím, než Vue 3 představil skládací prvky, jste mohli používat mixiny k zachycení kódu a jeho opětovnému použití v různých částech vaší aplikace. Mixins obsahoval možnosti Vue.js, jako jsou data, metody a háky životního cyklu, umožňující opětovné použití kódu napříč více komponentami.
Chcete-li vytvořit mixiny, musíte je strukturovat do samostatných souborů a poté je aplikovat na komponenty přidáním mixinu do vlastnosti mixins v objektu voleb komponenty. Například:
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;
},
},
};
Tento fragment kódu zobrazuje obsah mixinu pro ověřování formulářů. Tento mixin obsahuje dvě vlastnosti dat – formData a formErrors – původně nastavené na prázdné hodnoty.
formData ukládá vstupní data pro formulář, včetně polí uživatelského jména a hesla, která jsou inicializována jako prázdná. formErrors zrcadlí tuto strukturu, aby obsahovala potenciální chybové zprávy, také zpočátku prázdné.
Mixin také obsahuje metodu validateForm(), která kontroluje, zda pole uživatelského jména a hesla nejsou prázdná. Pokud je některé pole prázdné, vyplní datovou vlastnost formErrors příslušnou chybovou zprávou.
Metoda vrátí hodnotu true pro platný formulář, když je formErrors prázdný. Mixin můžete použít jeho importem do vaší komponenty Vue a přidáním do vlastnosti mixin objektu Options:
<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>
Tento příklad ukazuje komponentu Vue napsanou pomocí objektového přístupu Options. Vlastnost mixins zahrnuje všechny mixiny, které jste importovali. V tomto případě komponenta používá metodu validateForm z mixinu formValidation, aby informovala uživatele, zda bylo odeslání formuláře úspěšné.
Jak používat Composables
Composable je samostatný soubor JavaScript s funkcemi přizpůsobenými konkrétním zájmům nebo požadavkům. Rozhraní API pro složení Vue můžete využít v rámci komposovatelného pomocí funkcí, jako jsou reference a vypočítané reference.
Tento přístup k API kompozice vám umožňuje vytvářet funkce, které se integrují do různých komponent. Tyto funkce vracejí objekt, který můžete snadno importovat a začlenit do komponent Vue prostřednictvím funkce nastavení Composition API.
Vytvořte nový soubor JavaScript v adresáři src vašeho projektu, abyste mohli použít komposovatelný soubor. U větších projektů zvažte uspořádání složky v rámci src a vytvoření samostatných souborů JavaScriptu pro různé sestavitelné položky, přičemž zajistěte, aby název každé sestavy odpovídal jejímu účelu.
V souboru JavaScript definujte funkci, kterou požadujete. Zde je restrukturalizace mixinu formValidation jako složitelného:
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,
};
}
Tento fragment začíná importem reaktivní funkce z balíčku vue. Poté vytvoří exportovatelnou funkci useFormValidation().
Pokračuje vytvořením reaktivní proměnné, state, která obsahuje vlastnosti formData a formErrors. Fragment pak zpracovává ověření formuláře velmi podobným přístupem jako mixin. Nakonec vrátí stavovou proměnnou a funkci validateForm jako objekt.
Toto skládací můžete použít importováním funkce JavaScriptu ze souboru ve vaší 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>
Po importu složeného useFormValidation tento kód destruuje objekt JavaScript, který vrací, a pokračuje s ověřováním formuláře. Upozorní, zda je odeslaný formulář úspěšný nebo obsahuje chyby.
Composables jsou nové mixiny
Zatímco mixiny byly užitečné ve Vue 2 pro opětovné použití kódu, composable je nahradily ve Vue 3. Composables poskytují strukturovanější a udržitelnější přístup k opětovnému použití logiky v aplikacích Vue.js, což usnadňuje vytváření škálovatelných webových aplikací s Vue.