Kako ponovno upotrijebiti logiku u Vue.js s Composables

Prilikom programiranja važno je strukturirati svoju bazu koda tako da ponovno koristite kod gdje god je to moguće. Dupliciranje koda može napuhati bazu koda i zakomplicirati otklanjanje pogrešaka, posebno u većim aplikacijama.

Vue pojednostavljuje ponovnu upotrebu koda kroz composables. Composables su funkcije koje enkapsuliraju logiku i možete ih ponovno upotrijebiti u svom projektu za rukovanje sličnim funkcijama.

Je li to uvijek bilo Composables?

Prije nego što je Vue 3 predstavio composables, mogli ste koristiti mixine za snimanje koda i njegovu ponovnu upotrebu u različitim dijelovima svoje aplikacije. Mixins sadržani Vue.js opcije kao što su podaci, metode i hookovi životnog ciklusa, omogućujući ponovnu upotrebu koda u više komponenti.

Da biste stvorili miksine, strukturirajte ih u zasebne datoteke, a zatim ih primijenite na komponente dodavanjem miksina u mixins svojstvo unutar objekta opcija komponente. Na primjer:

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

Ovaj isječak koda prikazuje sadržaj mixina za provjeru valjanosti obrazaca. Ovaj mixin sadrži dva svojstva podataka—obrazacData i formErrors—početno postavljeno na prazne vrijednosti.

formData pohranjuje ulazne podatke za obrazac, uključujući polja korisničkog imena i lozinke koja su inicijalizirana kao prazna. formErrors zrcali ovu strukturu za držanje potencijalnih poruka o pogreškama, također u početku prazne.

Mixin također sadrži metodu, validateForm(), kako biste provjerili da polja za korisničko ime i lozinku nisu prazna. Ako je bilo koje polje prazno, ono popunjava svojstvo podataka formErrors odgovarajućom porukom o pogrešci.

Metoda se vraća pravi za valjani obrazac, kada je formErrors prazan. Možete koristiti mixin tako da ga uvezete u svoju Vue komponentu i dodate u svojstvo mixin objekta 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>

Ovaj primjer prikazuje Vue komponentu napisanu pomoću pristupa objekta Options. The mixins svojstvo uključuje sve miksine koje ste uvezli. U ovom slučaju, komponenta koristi metodu validateForm iz formValidation mixin da obavijesti korisnika je li slanje obrasca uspješno.

Kako koristiti Composables

Composable je samostalna JavaScript datoteka s funkcijama prilagođenim specifičnim problemima ili zahtjevima. Možete iskoristiti Vueov API za sastav unutar sastavivog, koristeći značajke kao što su reference i izračunate reference.

Ovaj pristup sastavnom API-ju omogućuje vam stvaranje funkcija koje se integriraju u različite komponente. Ove funkcije vraćaju objekt koji možete jednostavno uvesti i ugraditi u Vue komponente putem funkcije postavljanja Composition API-ja.

Stvorite novu JavaScript datoteku u svom projektu src imenik za korištenje composable. Za veće projekte, razmislite o organiziranju mape unutar src i stvaranju zasebnih JavaScript datoteka za različite komponirane elemente, osiguravajući da naziv svakog kompozitnog elementa odražava njegovu svrhu.

Unutar JavaScript datoteke definirajte funkciju koju trebate. Evo restrukturiranja formValidation mixin kao sastavni element:

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

Ovaj isječak počinje uvozom reaktivne funkcije iz vue paket. Zatim stvara funkciju za izvoz, useFormValidation().

Nastavlja se stvaranjem reaktivne varijable, država, koji sadrži svojstva formData i formErrors. Isječak zatim obrađuje provjeru valjanosti obrasca vrlo sličnim pristupom mixinu. Konačno, vraća varijablu stanja i funkciju validateForm kao objekt.

Možete koristiti ovaj composable by uvoz JavaScript funkcije iz datoteke u vašoj 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>

Nakon uvoza useFormValidation composable, ovaj kod destrukturira JavaScript objekt vraća se i nastavlja s provjerom valjanosti obrasca. Upozorava je li poslani obrazac uspješan ili sadrži pogreške.

Kompoziti su novi miksini

Dok su mixini bili korisni u Vue 2 za ponovnu upotrebu koda, composables su ih zamijenili u Vue 3. Composables pružaju strukturiraniji pristup ponovnoj upotrebi logike u Vue.js aplikacijama koji se lakše održava, što olakšava izradu skalabilnih web aplikacija s Vueom.