Під час програмування важливо структурувати свою кодову базу так, щоб ви повторно використовували код, де це можливо. Дублювання коду може збільшити кодову базу та ускладнити налагодження, особливо у великих програмах.
Vue спрощує повторне використання коду через composables. Компоновані функції — це функції, які інкапсулюють логіку, і ви можете повторно використовувати їх у своєму проекті для обробки подібних функцій.
Це завжди було Composables?
До того, як Vue 3 представив composables, ви могли використовувати mixins для захоплення коду та повторного використання його в різних частинах вашої програми. Міксини містили такі параметри Vue.js, як дані, методи та хуки життєвого циклу, що дозволяло повторне використання коду в кількох компонентах.
Щоб створити міксини, ви структуруєте їх у окремі файли, а потім застосовуєте до компонентів, додаючи міксини до властивості міксинів в об’єкті параметрів компонента. Наприклад:
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
Компонований файл — це самодостатній файл JavaScript із функціями, адаптованими до конкретних проблем або вимог. Ви можете використовувати API композиції Vue у межах composable, використовуючи такі функції, як посилання та обчислені посилання.
Цей доступ до API композиції дозволяє створювати функції, які інтегруються в різні компоненти. Ці функції повертають об’єкт, який ви можете легко імпортувати та включити до компонентів Vue за допомогою функції налаштування Composition API.
Створіть новий файл JavaScript у каталозі src вашого проекту, щоб використовувати composable. Для великих проектів подумайте про те, щоб організувати папку в src і створити окремі файли JavaScript для різних компонованих елементів, переконавшись, що ім’я кожного складеного елемента відображає його призначення.
У файлі JavaScript визначте потрібну функцію. Ось реструктуризація міксину formValidation як композиції:
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>
Після імпорту composable useFormValidation цей код деструктурує об’єкт JavaScript, який він повертає, і продовжує перевірку форми. Він сповіщає про те, чи надіслана форма успішна чи містить помилки.
Складові елементи — це нові міксини
Хоча міксини були корисними у Vue 2 для повторного використання коду, у Vue 3 їх замінили комбіновані. Компоновані забезпечують більш структурований і зручний підхід до повторного використання логіки в програмах Vue.js, що полегшує створення масштабованих веб-програм за допомогою Vue.