Kā atkārtoti izmantot loģiku Vue.js ar komposējamiem

Programmējot, ir svarīgi strukturēt savu kodu bāzi tā, lai pēc iespējas atkārtoti izmantotu kodu. Koda dublēšana var palielināt kodu bāzi un sarežģīt atkļūdošanu, īpaši lielākās lietotnēs.

Vue vienkāršo koda atkārtotu izmantošanu, izmantojot saliekamos elementus. Saliekamās funkcijas ir funkcijas, kas iekapsulē loģiku, un jūs varat tās atkārtoti izmantot visā projektā, lai apstrādātu līdzīgu funkcionalitāti.

Vai tas vienmēr bija saliekams?

Pirms Vue 3 ieviesa kompozīcijas, jūs varējāt izmantot mixins, lai uztvertu kodu un atkārtoti izmantotu to dažādās lietojumprogrammas daļās. Sastāvā esošie maisījumi Vue.js opcijas, piemēram, dati, metodes un dzīves cikla āķi, kas ļauj atkārtoti izmantot kodu vairākos komponentos.

Lai izveidotu miksīnus, strukturējiet tos atsevišķos failos un pēc tam lietojiet tos komponentiem, pievienojot mixin maisījumi īpašums komponenta opciju objektā. Piemēram:

// formValidation.js

instagram viewer


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 koda fragments parāda veidlapu apstiprināšanas miksa saturu. Šajā sajaukumā ir divi datu rekvizīti -formData un formErrors— sākotnēji iestatītas uz tukšām vērtībām.

formData saglabā veidlapas ievades datus, tostarp lietotājvārda un paroles laukus, kas inicializēti kā tukši. formErrors atspoguļo šo struktūru, lai saglabātu iespējamos kļūdu ziņojumus, arī sākotnēji tukšus.

Maisījums satur arī metodi, validateForm(), lai pārbaudītu, vai lietotājvārda un paroles lauki nav tukši. Ja kāds lauks ir tukšs, tas aizpilda formErrors datu rekvizītu ar atbilstošu kļūdas ziņojumu.

Metode atgriežas taisnība derīgai formai, ja lauks formErrors ir tukšs. Varat izmantot miksu, importējot to savā Vue komponentā un pievienojot objekta Opcijas rekvizītam 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>

Šajā piemērā parādīts Vue komponents, kas rakstīts, izmantojot opciju objekta pieeju. The maisījumi īpašums ietver visus jūsu importētos miksus. Šajā gadījumā komponents izmanto valideForm metodi no formValidation mixin, lai informētu lietotāju, vai veidlapas iesniegšana bija veiksmīga.

Kā lietot kompozīciju

Komponējamais fails ir autonoms JavaScript fails ar funkcijām, kas pielāgotas konkrētām problēmām vai prasībām. Jūs varat piesaistīt Vue kompozīcijas API saliekamā, izmantojot tādas funkcijas kā refs un aprēķinātās atsauces.

Šī piekļuve kompozīcijas API ļauj izveidot funkcijas, kas integrējas dažādos komponentos. Šīs funkcijas atgriež objektu, kuru varat viegli importēt un iekļaut Vue komponentos, izmantojot kompozīcijas API iestatīšanas funkciju.

Izveidojiet jaunu JavaScript failu savā projektā src direktoriju, lai izmantotu komponējamo. Lielākiem projektiem apsveriet iespēju organizēt mapi src un izveidot atsevišķus JavaScript failus dažādiem saliekamajiem failiem, nodrošinot, ka katra saliekamā faila nosaukums atspoguļo tā mērķi.

JavaScript failā definējiet vajadzīgo funkciju. Šeit ir pārstrukturēšana formValidation sajauciet kā kompozīciju:

// 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 fragments sākas ar reaktīvās funkcijas importēšanu no vue iepakojums. Pēc tam tiek izveidota eksportējama funkcija, useFormValidation().

Tas turpinās, izveidojot reaktīvu mainīgo, Valsts, kurā ir rekvizīti formData un formErrors. Pēc tam fragments apstrādā veidlapas validāciju, izmantojot ļoti līdzīgu pieeju mixin. Visbeidzot, tas atgriež stāvokļa mainīgo un validateForm funkciju kā objektu.

Varat izmantot šo komponējamo ar JavaScript funkcijas importēšana no faila jūsu komponentā:

<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ēc useFormValidation saliekamā importēšanas šis kods iznīcina JavaScript objektu tas atgriežas un turpina veidlapas validāciju. Tas brīdina, vai iesniegtā veidlapa ir veiksmīga vai tajā ir kļūdas.

Komponējamie ir jauni salikumi

Lai gan Vue 2 miksīni bija noderīgi koda atkārtotai izmantošanai, Vue 3 tos ir aizstājuši kompozīcijas. Composables nodrošina strukturētāku un apkopējamāku pieeju loģikas atkārtotai izmantošanai Vue.js lietojumprogrammās, atvieglojot mērogojamu tīmekļa lietotņu izveidi, izmantojot Vue.