Када програмирате, важно је да структурирате своју базу кода тако да поново користите код тамо где је то могуће. Дуплирање кода може надути базу кода и закомпликовати отклањање грешака, посебно у већим апликацијама.
Вуе поједностављује поновну употребу кода помоћу компонованих. Композиције су функције које обухватају логику и можете их поново користити у свом пројекту за руковање сличном функционалношћу.
Преглед садржаја
Да ли је увек био композан?
Пре него што је Вуе 3 увео композитне компоненте, могли сте да користите миксине да ухватите код и поново га користите у различитим деловима ваше апликације. Миксини су садржали Вуе.јс опције као што су подаци, методе и кукице животног циклуса, омогућавајући поновну употребу кода у више компоненти.
Да бисте креирали миксине, ви их структурирате у засебне датотеке и затим их примените на компоненте додавањем миксина својству миксина у оквиру објекта опција компоненте. На пример:
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;
},
},
};
Овај исечак кода показује садржај мешавине за валидацију образаца. Овај микс садржи два својства података — формДата и формЕррорс — првобитно постављена на празне вредности.
формДата чува улазне податке за образац, укључујући поља корисничког имена и лозинке која су иницијализована као празна. формЕррорс одражава ову структуру да задржи потенцијалне поруке о грешци, такође у почетку празне.
Миксин такође садржи метод, валидатеФорм(), за проверу да поља корисничког имена и лозинке нису празна. Ако је било које поље празно, оно попуњава својство података формЕррорс одговарајућом поруком о грешци.
Метод враћа труе за важећи образац, када је формЕррорс празан. Можете да користите микин тако што ћете га увести у своју компоненту Вуе и додати га својству микин објекта Оптионс:
<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>
Овај пример приказује компоненту Вуе написану коришћењем приступа Оптионс објекта. Својство микинс укључује све миксине које сте увезли. У овом случају, компонента користи метод валидатеФорм из мешавине формВалидатион да обавести корисника да ли је подношење обрасца било успешно.
Како користити Цомпосаблес
Композиција је самостална ЈаваСцрипт датотека са функцијама прилагођеним специфичним проблемима или захтевима. Можете искористити Вуе-ов АПИ за композицију унутар компонираног, користећи функције као што су рефс и цомпутед рефс.
Овај приступ АПИ-ју композиције омогућава вам да креирате функције које се интегришу у различите компоненте. Ове функције враћају објекат, који можете лако да увезете и уградите у Вуе компоненте преко функције подешавања Композиционог АПИ-ја.
Креирајте нову ЈаваСцрипт датотеку у срц директоријуму вашег пројекта да бисте користили компоновани. За веће пројекте, размислите о организовању фасцикле у оквиру срц-а и креирању засебних ЈаваСцрипт датотека за различите композитне датотеке, обезбеђујући да име сваког компоновања одражава његову сврху.
Унутар ЈаваСцрипт датотеке дефинишите функцију која вам је потребна. Ево реструктурирања миксина формВалидатион као композитног:
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,
};
}
Овај исечак почиње увозом реактивне функције из вуе пакета. Затим креира функцију за извоз, усеФормВалидатион().
Наставља се креирањем реактивне променљиве, стања, која садржи својства формДата и формЕррорс. Исечак затим обрађује валидацију обрасца са веома сличним приступом мешању. Коначно, враћа променљиву стања и функцију валидатеФорм као објекат.
Можете користити ово састављање тако што ћете увести ЈаваСцрипт функцију из датотеке у вашој компоненти:
<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>
Након увоза усеФормВалидатион цомпосабле, овај код деструктурира ЈаваСцрипт објекат који враћа и наставља са провјером ваљаности обрасца. Упозорава да ли је послати образац успешан или има грешака.
Цомпосаблес су нови миксини
Док су миксини били корисни у Вуе 2 за поновну употребу кода, компоновани су их заменили у Вуе 3. Цомпосаблес пружају структуриранији и одрживији приступ поновном коришћењу логике у Вуе.јс апликацијама, што олакшава прављење скалабилних веб апликација помоћу Вуе-а.