Како поново користити логику у Вуе.јс са Цомпосаблес

Када програмирате, важно је да структурирате своју базу кода тако да поново користите код тамо где је то могуће. Дуплирање кода може надути базу кода и закомпликовати отклањање грешака, посебно у већим апликацијама.

Вуе поједностављује поновну употребу кода помоћу компонованих. Композиције су функције које обухватају логику и можете их поново користити у свом пројекту за руковање сличном функционалношћу.

Да ли је увек био композан?

Пре него што је Вуе 3 увео композитне компоненте, могли сте да користите миксине да ухватите код и поново га користите у различитим деловима ваше апликације. Миксини садржани Вуе.јс опције као што су подаци, методе и кукице животног циклуса, омогућавајући поновну употребу кода у више компоненти.

Да бисте креирали миксине, структурирате их у засебне датотеке и затим их примените на компоненте додавањем миксина у микинс својство у оквиру објекта опција компоненте. На пример:

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

Овај исечак кода показује садржај мешавине за валидацију образаца. Овај микс садржи два својства података -формДата и формЕррорс— првобитно постављено на празне вредности.

формДата чува улазне податке за образац, укључујући поља корисничког имена и лозинке која су иницијализована као празна. формЕррорс одражава ову структуру да задржи потенцијалне поруке о грешци, такође у почетку празне.

Миксин такође садржи метод, валидатеФорм(), да проверите да поља за корисничко име и лозинку нису празна. Ако је било које поље празно, оно попуњава својство података формЕррорс одговарајућом поруком о грешци.

Метод се враћа истина за важећи образац, када је формЕррорс празан. Можете да користите микин тако што ћете га увести у своју компоненту Вуе и додати га својству микин објекта Оптионс:

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

Овај пример приказује компоненту Вуе написану коришћењем приступа Оптионс објекта. Тхе микинс својство укључује све миксине које сте увезли. У овом случају, компонента користи метод валидатеФорм из формВалидатион микин да обавести корисника да ли је подношење обрасца било успешно.

Како користити Цомпосаблес

Композиција је самостална ЈаваСцрипт датотека са функцијама прилагођеним специфичним проблемима или захтевима. Можете искористити Вуеов АПИ за композицију унутар компонираног, користећи функције као што су рефс и цомпутед рефс.

Овај приступ АПИ-ју композиције омогућава вам да креирате функције које се интегришу у различите компоненте. Ове функције враћају објекат, који можете лако да увезете и уградите у Вуе компоненте преко функције подешавања Композиционог АПИ-ја.

Направите нову ЈаваСцрипт датотеку у свом пројекту срц директоријум за коришћење компонованог. За веће пројекте, размислите о организовању фасцикле у оквиру срц-а и креирању засебних ЈаваСцрипт датотека за различите компониве, обезбеђујући да назив сваког компоновања одражава његову сврху.

Унутар ЈаваСцрипт датотеке дефинишите функцију која вам је потребна. Ево реструктурирања формВалидатион микин као компонован:

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

Овај исечак почиње увозом реактивне функције из вуе пакет. Затим креира функцију за извоз, усеФормВалидатион().

Наставља се стварањем реактивне променљиве, држава, који садржи својства формДата и формЕррорс. Исечак затим обрађује валидацију обрасца са веома сличним приступом мешању. Коначно, враћа променљиву стања и функцију валидатеФорм као објекат.

Можете користити овај компонован од увоз ЈаваСцрипт функције из датотеке у вашој компоненти:

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

Након увоза усеФормВалидатион композитног, овај код деструктурира ЈаваСцрипт објекат враћа се и наставља са валидацијом обрасца. Упозорава да ли је послати образац успешан или има грешака.

Цомпосаблес су нови миксини

Док су миксини били корисни у Вуе 2 за поновну употребу кода, компоновани су их заменили у Вуе 3. Цомпосаблес пружају структуриранији и одрживији приступ поновном коришћењу логике у Вуе.јс апликацијама, што олакшава прављење скалабилних веб апликација помоћу Вуе-а.