Loogika taaskasutamine Vue.js-is koos komponeeritavate üksustega

Programmeerimisel on oluline koodibaas üles ehitada nii, et kasutaksite koodi võimaluse korral uuesti. Koodi dubleerimine võib koodibaasi paisutada ja silumist keerulisemaks muuta, eriti suuremates rakendustes.

Vue lihtsustab koodi taaskasutamist koostatavate elementide kaudu. Komponeeritavad funktsioonid on funktsioonid, mis kapseldavad loogikat ja saate neid sarnaste funktsioonide haldamiseks kogu oma projektis uuesti kasutada.

Kas see oli alati komponeeritav?

Enne kui Vue 3 tutvustas komponeeritavaid elemente, võisite koodi jäädvustamiseks ja rakenduse erinevates osades uuesti kasutamiseks kasutada miksine. Sisaldavad segud Vue.js-i valikud, nagu andmed, meetodid ja elutsükli konksud, mis võimaldab koodi taaskasutada mitme komponendi vahel.

Miksiinide loomiseks struktureerite need eraldi failidesse ja seejärel rakendate need komponentidele, lisades mixini segud atribuut komponendi suvandite objektis. Näiteks:

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

See koodilõik näitab vormide kinnitamise miksini sisu. Sellel segul on kaks andmeatribuuti -formData ja formErrors— algselt seatud tühjad väärtused.

formData salvestab vormi sisendandmed, sealhulgas tühjana lähtestatud kasutajanime ja parooli väljad. formErrors peegeldab seda struktuuri potentsiaalsete tõrketeadete hoidmiseks, samuti esialgu tühjaks.

Segu sisaldab ka meetodit, validateForm(), et kontrollida, kas kasutajanime ja parooli väljad pole tühjad. Kui kumbki väli on tühi, täidab see andmeatribuudi formErrors sobiva veateate.

Meetod naaseb tõsi kehtiva vormi jaoks, kui formErrors on tühi. Miksinit saate kasutada, importides selle oma Vue komponenti ja lisades selle objekti Options atribuudile 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>

See näide näitab Vue komponenti, mis on kirjutatud objekti Options lähenemisviisi kasutades. The segud atribuut sisaldab kõiki imporditud miksine. Sel juhul kasutab komponent valideForm meetodit vormiValideerimine mixin, et teavitada kasutajat, kas vormi esitamine õnnestus.

Komponeeritavate seadmete kasutamine

Koostatav on iseseisev JavaScripti fail, mille funktsioonid on kohandatud konkreetsetele probleemidele või nõuetele. Saate võimendada Vue kompositsiooni API koostatavas, kasutades selliseid funktsioone nagu viited ja arvutatud viited.

See juurdepääs kompositsiooni API-le võimaldab teil luua funktsioone, mis integreeruvad erinevatesse komponentidesse. Need funktsioonid tagastavad objekti, mille saate kompositsiooni API häälestusfunktsiooni kaudu hõlpsasti importida ja Vue komponentidesse lisada.

Looge oma projektis uus JavaScripti fail src komponeeritava kataloogi kasutamiseks. Suuremate projektide puhul kaaluge kausta korraldamist src-s ja eraldi JavaScript-failide loomist erinevate komponeeritavate üksuste jaoks, tagades, et iga koostatava nimi kajastab selle eesmärki.

Määrake JavaScript-failis soovitud funktsioon. Siin on ümberstruktureerimine vormiValideerimine segamine kompositsioonina:

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

See väljavõte algab reaktiivfunktsiooni importimisega failist vue pakett. Seejärel loob see eksporditava funktsiooni, useFormValidation().

See jätkub reaktiivse muutuja loomisega, olek, mis sisaldab atribuute formData ja formErrors. Seejärel käsitleb fragment vormi valideerimist mixiniga väga sarnase lähenemisviisiga. Lõpuks tagastab see objektina olekumuutuja ja funktsiooni validateForm.

Saate seda komponeeritavat kasutada JavaScripti funktsiooni importimine failist teie komponendis:

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

Pärast koostatava useFormValidation importimist see kood hävitab JavaScripti objekti see naaseb ja jätkab vormi kinnitamist. See annab märku, kas esitatud vorm on edukas või sisaldab vigu.

Komponeeritavad on uued segud

Kui miksinid olid Vue 2-s koodi taaskasutamiseks kasulikud, siis Vue 3-s on need asendatud komponeeritavad. Komponeeritavad rakendused pakuvad Vue.js rakendustes loogika taaskasutamiseks struktureeritumat ja hooldatavamat lähenemist, muutes Vue abil skaleeritavate veebirakenduste loomise lihtsamaks.