Kaip pakartotinai panaudoti logiką Vue.js naudojant komponuojamus elementus

Programuojant svarbu susisteminti kodų bazę taip, kad, kur įmanoma, kodą naudotumėte pakartotinai. Kodo kopijavimas gali išpūsti kodų bazę ir apsunkinti derinimą, ypač didesnėse programose.

„Vue“ supaprastina pakartotinį kodo naudojimą per komponuojamus elementus. Kompozicijos yra funkcijos, apimančios logiką, ir jūs galite pakartotinai jas naudoti visame projekte, kad atliktumėte panašias funkcijas.

Ar tai visada buvo komponuojama?

Prieš „Vue 3“ pristatant komponuojamus elementus, galėjote naudoti mišinius, kad užfiksuotumėte kodą ir pakartotinai panaudotumėte jį įvairiose programos dalyse. Sudėtyje esantys mišiniai Vue.js parinktys, pvz., duomenys, metodai ir gyvavimo ciklo kabliukai, leidžiantį pakartotinai naudoti kodą keliuose komponentuose.

Norėdami sukurti mišinius, suskirstykite juos į atskirus failus ir pridėkite juos prie komponentų mišiniai ypatybę komponento parinkčių objekte. Pavyzdžiui:

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

Šis kodo fragmentas rodo formų patvirtinimo rinkinio turinį. Šiame mišinyje yra dvi duomenų savybės -formData ir formErrors– iš pradžių nustatytos tuščios reikšmės.

formData saugo formos įvesties duomenis, įskaitant vartotojo vardo ir slaptažodžio laukus, inicijuotus kaip tuščius. formErrors atspindi šią struktūrą, kad talpintų galimus klaidų pranešimus, taip pat iš pradžių tuščius.

Mišinyje taip pat yra metodas, patvirtintiForm(), kad patikrintumėte, ar vartotojo vardo ir slaptažodžio laukai nėra tušti. Jei kuris nors laukas yra tuščias, jis užpildo duomenų ypatybę formErrors atitinkamu klaidos pranešimu.

Metodas grįžta tiesa tinkama forma, kai formErrors yra tuščias. Mišinį galite naudoti importuodami jį į „Vue“ komponentą ir pridėdami jį prie objekto „Options“ ypatybės „Mixin“:

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

Šiame pavyzdyje parodytas Vue komponentas, parašytas naudojant Options objekto metodą. The mišiniai nuosavybė apima visus jūsų importuotus mišinius. Šiuo atveju komponentas naudoja validateForm metodą iš formaPatvirtinimas mixin, kad informuotų vartotoją, ar formos pateikimas buvo sėkmingas.

Kaip naudoti komposuojamus elementus

Kompozicija yra savarankiškas „JavaScript“ failas su funkcijomis, pritaikytomis konkrečioms problemoms ar reikalavimams. Galite pasinaudoti svertu „Vue“ kompozicijos API komponuojamame faile, naudojant tokias funkcijas kaip nuorodos ir apskaičiuotos nuorodos.

Ši prieiga prie kompozicijos API leidžia kurti funkcijas, kurios integruojamos į įvairius komponentus. Šios funkcijos grąžina objektą, kurį galite lengvai importuoti ir įtraukti į „Vue“ komponentus naudodami kompozicijos API sąrankos funkciją.

Sukurkite naują „JavaScript“ failą savo projekte src katalogą, kad galėtumėte naudoti komponuojamą. Didesniuose projektuose apsvarstykite galimybę sutvarkyti aplanką „src“ ir sukurti atskirus „JavaScript“ failus, skirtus skirtingiems komponuojamiems failams, užtikrindami, kad kiekvienos sudedamosios dalies pavadinimas atitiktų jo paskirtį.

„JavaScript“ faile apibrėžkite reikalingą funkciją. Čia yra restruktūrizavimas formaPatvirtinimas sumaišyti kaip kompoziciją:

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

Šis fragmentas prasideda importuojant reaktyviąją funkciją iš vue paketą. Tada sukuriama eksportuojama funkcija, useFormValidation().

Jis tęsiamas kurdamas reaktyvųjį kintamąjį, valstybė, kuriame yra formData ir formErrors ypatybės. Tada fragmentas apdoroja formos patvirtinimą labai panašiai kaip maišymas. Galiausiai jis grąžina būsenos kintamąjį ir funkciją validateForm kaip objektą.

Galite naudoti šį komponuojamą pagal „JavaScript“ funkcijos importavimas iš failo jūsų komponente:

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

Importavus „useFormValidation“ sudaromą kodą sunaikina JavaScript objektą jis grįžta ir tęsia formos patvirtinimą. Jis įspėja, ar pateikta forma buvo sėkminga, ar joje yra klaidų.

Kompozicijos yra nauji mišiniai

Nors „Vue 2“ maišytuvai buvo naudingi norint pakartotinai naudoti kodą, „Vue 3“ juos pakeitė komponuojami elementai. Kompozicijos suteikia daugiau struktūrizuoto ir prižiūrimo logikos pakartotinio naudojimo Vue.js programose metodą, todėl lengviau kurti keičiamo dydžio žiniatinklio programas naudojant Vue.