Kako ponovno uporabiti logiko v Vue.js s Composables

Pri programiranju je pomembno, da svojo kodno zbirko strukturirate tako, da kodo ponovno uporabite, kjer je to mogoče. Podvajanje kode lahko napihne kodno zbirko in oteži odpravljanje napak, zlasti v večjih aplikacijah.

Vue poenostavi ponovno uporabo kode prek sestavljivih elementov. Sestavljive funkcije so funkcije, ki zajemajo logiko in jih lahko znova uporabite v svojem projektu za obravnavo podobnih funkcij.

Je bilo vedno sestavljivo?

Preden je Vue 3 uvedel sestavljive elemente, ste lahko uporabili mixine za zajem kode in jo ponovno uporabili v različnih delih vaše aplikacije. Vsebovane mešanice Možnosti Vue.js, kot so podatki, metode in kavlji življenjskega cikla, ki omogoča ponovno uporabo kode v več komponentah.

Če želite ustvariti miksine, jih strukturirajte v ločene datoteke in jih nato uporabite za komponente tako, da dodate miksine v mixins lastnost znotraj predmeta možnosti komponente. Na primer:

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

Ta delček kode prikazuje vsebino mešanice za preverjanje obrazcev. Ta mixin vsebuje dve podatkovni lastnosti—formData in formErrors— prvotno nastavljeno na prazne vrednosti.

formData shrani vhodne podatke za obrazec, vključno s polji za uporabniško ime in geslo, ki sta inicializirani kot prazni. formErrors zrcali to strukturo, da zadrži potencialna sporočila o napakah, ki so na začetku tudi prazna.

Mixin vsebuje tudi metodo, validateForm(), da preverite, ali polji za uporabniško ime in geslo nista prazni. Če je katero koli polje prazno, zapolni podatkovno lastnost formErrors z ustreznim sporočilom o napaki.

Metoda se vrača prav za veljaven obrazec, ko je formErrors prazen. Mixin lahko uporabite tako, da ga uvozite v svojo komponento Vue in dodate v lastnost mixin predmeta 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>

Ta primer prikazuje komponento Vue, napisano s pristopom predmeta Možnosti. The mixins vključuje vse miksine, ki ste jih uvozili. V tem primeru komponenta uporablja metodo validateForm iz formValidation mixin, da obvesti uporabnika, ali je bila oddaja obrazca uspešna.

Kako uporabljati Composables

Sestavljiva datoteka je samostojna datoteka JavaScript s funkcijami, prilagojenimi posebnim skrbem ali zahtevam. Lahko izkoristite API za sestavo Vue znotraj sestavljivega z uporabo funkcij, kot so ref in izračunane ref.

Ta dostop do API-ja za sestavo vam omogoča ustvarjanje funkcij, ki se integrirajo v različne komponente. Te funkcije vrnejo predmet, ki ga lahko brez težav uvozite in vključite v komponente Vue prek nastavitvene funkcije vmesnika Composition API.

Ustvarite novo datoteko JavaScript v svojem projektu src imenik za uporabo sestavljivega. Za večje projekte razmislite o organiziranju mape znotraj src in ustvarjanju ločenih datotek JavaScript za različne sestavljive elemente, pri čemer zagotovite, da ime vsakega sestavljivega elementa odraža njegov namen.

Znotraj datoteke JavaScript definirajte funkcijo, ki jo potrebujete. Tukaj je prestrukturiranje formValidation mixin kot sestavljiv:

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

Ta delček se začne z uvozom reaktivne funkcije iz vue paket. Nato ustvari funkcijo za izvoz, useFormValidation().

Nadaljuje se z ustvarjanjem reaktivne spremenljivke, država, ki vsebuje lastnosti formData in formErrors. Delček nato obravnava preverjanje obrazca z zelo podobnim pristopom kot mixin. Na koncu vrne spremenljivko stanja in funkcijo validateForm kot objekt.

To sestavljivo lahko uporabite tako, da uvoz funkcije JavaScript iz datoteke v vaši komponenti:

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

Po uvozu useFormValidation composable, ta koda uniči objekt JavaScript vrne se in nadaljuje s preverjanjem obrazca. Opozori, ali je predložen obrazec uspešen ali vsebuje napake.

Sestavljivi elementi so novi miksini

Medtem ko so bili miksini uporabni v Vue 2 za ponovno uporabo kode, so jih sestavljivi nadomestili v Vue 3. Composables zagotavljajo bolj strukturiran in vzdržljiv pristop k ponovni uporabi logike v aplikacijah Vue.js, kar olajša gradnjo razširljivih spletnih aplikacij z Vue.