Vue.js: n logiikan uudelleenkäyttö Composablesin kanssa

Ohjelmoinnissa on tärkeää jäsentää koodikantasi niin, että käytät koodia uudelleen mahdollisuuksien mukaan. Koodin kopioiminen voi turvottaa koodikantaa ja vaikeuttaa virheenkorjausta, etenkin suuremmissa sovelluksissa.

Vue yksinkertaistaa koodin uudelleenkäyttöä komposoitavien avulla. Composables ovat toimintoja, jotka kapseloivat logiikkaa, ja voit käyttää niitä uudelleen koko projektissasi käsitelläksesi samanlaisia ​​toimintoja.

Oliko se aina koostettavissa?

Ennen kuin Vue 3 esitteli koostettaviksi, voit käyttää mixinejä kaapataksesi koodia ja käyttää sitä uudelleen sovelluksesi eri osissa. Sisältää sekoituksia Vue.js-vaihtoehdot, kuten tiedot, menetelmät ja elinkaaren koukut, mahdollistaa koodin uudelleenkäytön useissa komponenteissa.

Mixinien luomiseksi strukturoi ne erillisiksi tiedostoiksi ja lisää ne komponentteihin lisäämällä mixinin sekoituksia ominaisuus komponentin asetukset-objektissa. Esimerkiksi:

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

Tämä koodinpätkä näyttää lomakkeiden vahvistamiseen tarkoitetun mixinin sisällön. Tämä sekoitus sisältää kaksi dataominaisuutta -formData ja entiset virheet—asetetaan aluksi tyhjiksi arvoiksi.

formData tallentaa lomakkeen syöttötiedot, mukaan lukien käyttäjätunnus- ja salasanakentät, jotka on alustettu tyhjiksi. formErrors peilaa tätä rakennetta pitääkseen mahdolliset virheilmoitukset, myös aluksi tyhjinä.

Sekoitus sisältää myös menetelmän, validateForm(), tarkistaaksesi, että käyttäjätunnus- ja salasanakentät eivät ole tyhjiä. Jos jompikumpi kenttä on tyhjä, se täyttää formErrors-tietoominaisuuden asianmukaisella virhesanomalla.

Menetelmä palaa totta kelvolliselle lomakkeelle, kun formErrors on tyhjä. Voit käyttää mixinia tuomalla sen Vue-komponenttiin ja lisäämällä sen Options-objektin mixin-ominaisuuteen:

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

Tämä esimerkki näyttää Vue-komponentin, joka on kirjoitettu Options-objektilähestymistavalla. The sekoituksia omaisuus sisältää kaikki tuomasi miksaukset. Tässä tapauksessa komponentti käyttää valideForm-menetelmää tiedostosta formValidation mixin ilmoittaa käyttäjälle, onnistuiko lomakkeen lähetys.

Composablesin käyttäminen

Muodostettava on itsenäinen JavaScript-tiedosto, jonka toiminnot on räätälöity tiettyihin huolenaiheisiin tai vaatimuksiin. Voit hyödyntää Vuen koostumuksen API kirjoitettavan sisällä käyttämällä ominaisuuksia, kuten viitteitä ja laskettuja viitteitä.

Tämän kokoonpanon API: n pääsyn avulla voit luoda toimintoja, jotka integroituvat eri komponentteihin. Nämä funktiot palauttavat objektin, jonka voit helposti tuoda ja sisällyttää Vue-komponentteihin Compposition API: n asetustoiminnon kautta.

Luo uusi JavaScript-tiedosto projektiisi src hakemistoon kirjoitettavan tiedoston käyttämiseksi. Suuremmissa projekteissa kannattaa harkita kansion järjestämistä src: ssä ja erillisten JavaScript-tiedostojen luomista eri kirjoitettaville kohteille, jotta jokaisen kirjoitettavan nimi vastaa sen tarkoitusta.

Määritä JavaScript-tiedoston sisällä tarvitsemasi funktio. Tässä on rakenneuudistus formValidation sekoitetaan yhdistelmänä:

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

Tämä katkelma alkaa tuomalla reaktiivinen funktio tiedostosta vue paketti. Sitten se luo vietävän funktion, useFormValidation().

Se jatkaa luomalla reaktiivisen muuttujan, osavaltio, joka sisältää formData- ja formErrors-ominaisuudet. Katkelma käsittelee sitten lomakkeen validoinnin hyvin samankaltaisella lähestymistavalla kuin mixin. Lopuksi se palauttaa tilamuuttujan ja validateForm-funktion objektina.

Voit käyttää tätä koostettavaa by JavaScript-funktion tuominen tiedostosta komponentissasi:

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

Sen jälkeen, kun useFormValidation-kooste on tuotu, tämä koodi tuhoaa JavaScript-objektin se palaa ja jatkaa lomakkeen vahvistusta. Se varoittaa, onko lähetetty lomake onnistunut vai onko siinä virheitä.

Composables ovat uusia sekoituksia

Vaikka mixinit olivat hyödyllisiä Vue 2:ssa koodin uudelleenkäytössä, Vue 3:ssa ne ovat korvanneet yhdistelmät. Composables tarjoaa jäsennellymmän ja ylläpidettävämmän lähestymistavan logiikan uudelleenkäyttöön Vue.js-sovelluksissa, mikä helpottaa skaalautuvien verkkosovellusten rakentamista Vuella.