Когато програмирате, е важно да структурирате вашата кодова база, така че да използвате повторно кода, където е възможно. Дублиращият код може да раздуе кодовата база и да усложни отстраняването на грешки, особено в по-големи приложения.
Vue опростява повторното използване на код чрез composables. Composables са функции, които капсулират логиката и можете да ги използвате повторно във вашия проект, за да се справите с подобна функционалност.
Съдържание
Винаги ли е било Composables?
Преди Vue 3 да въведе composables, можете да използвате mixins за улавяне на код и повторното му използване в различни части на вашето приложение. Миксините съдържат опции на Vue.js като данни, методи и кукички за жизнения цикъл, което позволява повторно използване на код в множество компоненти.
За да създадете миксини, вие ги структурирате в отделни файлове и след това ги прилагате към компоненти, като добавите миксина към свойството mixins в рамките на обекта с опции на компонента. Например:
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;
},
},
};
Този кодов фрагмент показва съдържанието на миксин за валидиране на формуляри. Този миксин съдържа две свойства на данните — formData и formErrors — първоначално зададени на празни стойности.
formData съхранява входни данни за формуляра, включително полета за потребителско име и парола, инициализирани като празни. formErrors отразява тази структура, за да съдържа потенциални съобщения за грешка, също първоначално празни.
Миксинът също така съдържа метод, validateForm(), за проверка дали полетата за потребителско име и парола не са празни. Ако някое поле е празно, то попълва свойството данни formErrors с подходящо съобщение за грешка.
Методът връща true за валиден формуляр, когато formErrors е празен. Можете да използвате mixin, като го импортирате във вашия Vue компонент и го добавите към свойството mixin на обекта 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>
Този пример показва Vue компонент, написан с помощта на обектния подход Options. Свойството mixins включва всички mixins, които сте импортирали. В този случай компонентът използва метода validateForm от микса formValidation, за да информира потребителя дали подаването на формуляра е било успешно.
Как да използвате Composables
Composable е самостоятелен JavaScript файл с функции, съобразени с конкретни проблеми или изисквания. Можете да използвате API за съставяне на Vue в рамките на composable, като използвате функции като refs и computed refs.
Този достъп до API за съставяне ви позволява да създавате функции, които се интегрират в различни компоненти. Тези функции връщат обект, който можете лесно да импортирате и включите в компонентите на Vue чрез функцията за настройка на Composition API.
Създайте нов JavaScript файл в src директорията на вашия проект, за да използвате composable. За по-големи проекти помислете за организиране на папка в рамките на src и създаване на отделни JavaScript файлове за различни composables, като гарантирате, че името на всеки composable отразява неговата цел.
Вътре в JavaScript файла дефинирайте функцията, от която се нуждаете. Ето преструктуриране на миксина formValidation като composable:
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,
};
}
Този фрагмент започва с импортиране на реактивната функция от пакета vue. След това създава функция за експортиране, useFormValidation().
Продължава чрез създаване на реактивна променлива, състояние, която съдържа свойствата formData и formErrors. След това фрагментът обработва валидирането на формуляра с много подобен подход на mixin. Накрая връща променливата на състоянието и функцията validateForm като обект.
Можете да използвате този composable, като импортирате JavaScript функцията от файла във вашия компонент:
<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>
След импортиране на useFormValidation composable, този код деструктурира JavaScript обекта, който връща, и продължава с валидирането на формуляра. Той предупреждава дали изпратеният формуляр е успешен или има грешки.
Компонентите са новите миксини
Докато mixins бяха полезни във Vue 2 за повторно използване на код, composables ги замениха във Vue 3. Composables предоставят по-структуриран и поддържаем подход за повторно използване на логиката във Vue.js приложения, което улеснява изграждането на мащабируеми уеб приложения с Vue.