Composables са проста надстройка на mixins, която трябва да започнете да използвате с вашите Vue 3 приложения веднага.

Когато програмирате, е важно да структурирате вашата кодова база, така че да използвате повторно кода, където е възможно. Дублиращият код може да раздуе кодовата база и да усложни отстраняването на грешки, особено в по-големи приложения.

Vue опростява повторното използване на код чрез composables. Composables са функции, които капсулират логиката и можете да ги използвате повторно във вашия проект, за да се справите с подобна функционалност.

Винаги ли е било Composables?

Преди Vue 3 да въведе composables, можете да използвате mixins за улавяне на код и повторното му използване в различни части на вашето приложение. Съдържа миксини Опции на Vue.js като данни, методи и кукички за жизнен цикъл, което позволява повторно използване на код в множество компоненти.

За да създадете миксини, вие ги структурирате в отделни файлове и след това ги прилагате към компоненти, като добавите миксина към миксини свойство в рамките на обекта с опции на компонента. Например:

instagram viewer
// formValidation.js
exportconst 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.';
}

returnObject.keys(this.formErrors).length 0;
},
},
};

Този кодов фрагмент показва съдържанието на миксин за валидиране на формуляри. Този миксин съдържа две свойства на данните—formData и formErrors— първоначално зададени празни стойности.

formData съхранява входни данни за формуляра, включително полета за потребителско име и парола, инициализирани като празни. formErrors отразява тази структура, за да съдържа потенциални съобщения за грешка, също първоначално празни.

Миксинът също така съдържа метод, validateForm(), за да проверите дали полетата за потребителско име и парола не са празни. Ако някое поле е празно, то попълва свойството данни formErrors с подходящо съобщение за грешка.

Методът се връща вярно за валиден формуляр, когато formErrors е празен. Можете да използвате mixin, като го импортирате във вашия Vue компонент и го добавите към свойството mixin на обекта Options:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="formData.username" />
<spanclass="error">{{ formErrors.username }}span>
div>

<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="formData.password" />
<spanclass="error">{{ formErrors.password }}span>
div>

<buttontype="submit">Submitbutton>
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. The миксини свойство включва всички миксини, които сте импортирали. В този случай компонентът използва метода validateForm от formValidation mixin, за да информира потребителя дали подаването на формуляр е било успешно.

Как да използвате Composables

Composable е самостоятелен JavaScript файл с функции, съобразени с конкретни проблеми или изисквания. Можете да използвате ливъридж API за съставяне на Vue в рамките на composable, използвайки функции като refs и computed refs.

Този достъп до API за съставяне ви позволява да създавате функции, които се интегрират в различни компоненти. Тези функции връщат обект, който можете лесно да импортирате и включите в компонентите на Vue чрез функцията за настройка на Composition API.

Създайте нов JavaScript файл във вашия проект src директория за използване на composable. За по-големи проекти помислете за организиране на папка в рамките на src и създаване на отделни JavaScript файлове за различни composables, като гарантирате, че името на всеки composable отразява неговата цел.

Вътре в JavaScript файла дефинирайте функцията, от която се нуждаете. Ето едно преструктуриране на formValidation mixin като съставен:

// formValidation.js
import { reactive } from'vue';

exportfunctionuseFormValidation() {
const state = reactive({
formData: {
username: '',
password: '',
},
formErrors: {
username: '',
password: '',
},
});

functionvalidateForm() {
state.formErrors = {};

if (!state.formData.username.trim()) {
state.formErrors.username = 'Username is required.';
}

if (!state.formData.password.trim()) {
state.formErrors.password = 'Password is required.';
}

returnObject.keys(state.formErrors).length 0;
}

return {
state,
validateForm,
};
}

Този фрагмент започва с импортиране на реактивната функция от vue пакет. След това създава функция за експортиране, useFormValidation().

Продължава чрез създаване на реактивна променлива, състояние, който съдържа свойствата formData и formErrors. След това фрагментът обработва валидирането на формуляра с много подобен подход на mixin. Накрая връща променливата на състоянието и функцията validateForm като обект.

Можете да използвате този composable от импортиране на JavaScript функцията от файла във вашия компонент:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="state.formData.username" />
<spanclass="error">{{ state.formErrors.username }}span>
div>

<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="state.formData.password" />
<spanclass="error">{{ state.formErrors.password }}span>
div>

<buttontype="submit">Submitbutton>
form>
div>
template>

<scriptsetup>
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.