Как повторно использовать логику в Vue.js с помощью Composables

При программировании важно структурировать свою кодовую базу так, чтобы вы могли повторно использовать код там, где это возможно. Дублирование кода может раздуть кодовую базу и усложнить отладку, особенно в крупных приложениях.

Vue упрощает повторное использование кода посредством компоновки. Составные элементы — это функции, инкапсулирующие логику, и вы можете повторно использовать их в своем проекте для обработки аналогичных функций.

Всегда ли это были составные предметы?

До того, как во Vue 3 появились компонуемые объекты, вы могли использовать примеси для захвата кода и повторного использования его в разных частях вашего приложения. Миксины содержали Параметры Vue.js, такие как данные, методы и перехватчики жизненного цикла., что позволяет повторно использовать код в нескольких компонентах.

Чтобы создать примеси, вы структурируете их в отдельные файлы, а затем применяете их к компонентам, добавляя примесь в файл.

миксины свойство в объекте параметров компонента. Например:

// 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;
 },
 },
};

Этот фрагмент кода показывает содержимое примеси для проверки форм. Этот миксин содержит два свойства данных:данные формы и formErrors— изначально установлены пустые значения.

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

Миксин также содержит метод проверка формы(), чтобы убедиться, что поля имени пользователя и пароля не пусты. Если какое-либо поле пусто, оно заполняет свойство данных formErrors соответствующим сообщением об ошибке.

Метод возвращает истинный для допустимой формы, когда formErrors пуст. Вы можете использовать миксин, импортировав его в свой компонент 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. миксины Свойство включает в себя все импортированные вами примеси. В этом случае компонент использует метод validateForm из проверка формы mixin, чтобы сообщить пользователю, была ли отправка формы успешной.

Как использовать составные элементы

Компонуемый файл — это автономный файл JavaScript с функциями, адаптированными к конкретным задачам или требованиям. Вы можете использовать API композиции Vue внутри составного объекта, используя такие функции, как ссылки и вычисляемые ссылки.

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

Создайте новый файл JavaScript в файле вашего проекта. источник каталог для использования составного файла. Для более крупных проектов рассмотрите возможность организации папки в src и создания отдельных файлов JavaScript для разных компонуемых объектов, следя за тем, чтобы имя каждого компонуемого объекта отражало его назначение.

Внутри файла JavaScript определите нужную вам функцию. Вот такая реструктуризация проверка формы миксин как составной элемент:

// 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,
 };
}

Этот фрагмент начинается с импорта реактивной функции из вид упаковка. Затем он создает экспортируемую функцию, использоватьFormValidation().

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

Вы можете использовать эту компоновку с помощью импорт функции 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 этот код деструктурирует объект JavaScript он возвращается и продолжает проверку формы. Он предупреждает, была ли отправленная форма успешной или содержит ошибки.

Composables — новые миксины

Хотя примеси были полезны во Vue 2 для повторного использования кода, в Vue 3 их заменили компонуемые элементы. Composables обеспечивают более структурированный и удобный подход к повторному использованию логики в приложениях Vue.js, упрощая создание масштабируемых веб-приложений с помощью Vue.