Cum să refolosești logica în Vue.js cu Composables

Când programați, este important să vă structurați baza de cod, astfel încât să reutilizați codul acolo unde este posibil. Duplicarea codului poate umfla baza de cod și poate complica depanarea, în special în aplicațiile mai mari.

Vue simplifică reutilizarea codului prin composables. Composabilele sunt funcții care încapsulează logica și le puteți reutiliza în proiectul dvs. pentru a gestiona funcționalități similare.

A fost întotdeauna Composables?

Înainte ca Vue 3 să introducă composables, ați putea folosi mixuri pentru a captura codul și a-l reutiliza în diferite părți ale aplicației dvs. Mixine conținute Opțiuni Vue.js, cum ar fi date, metode și cârlige pentru ciclul de viață, permițând reutilizarea codului în mai multe componente.

Pentru a crea mixin-uri, le structurați în fișiere separate și apoi le aplicați componentelor adăugând mixin-ul la mixinele proprietatea din obiectul de opțiuni al componentei. De exemplu:

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

Acest fragment de cod arată conținutul unui mixin pentru validarea formularelor. Acest mixin găzduiește două proprietăți de date—formData și formErrors—setat inițial la valori goale.

formData stochează datele de intrare pentru formular, inclusiv câmpurile pentru nume de utilizator și parolă inițializate ca goale. formErrors oglindește această structură pentru a păstra mesajele de eroare potențiale, de asemenea goale inițial.

Mixinul conține și o metodă, validateForm(), pentru a verifica dacă câmpurile pentru nume de utilizator și parolă nu sunt goale. Dacă oricare câmp este gol, acesta completează proprietatea de date formErrors cu un mesaj de eroare corespunzător.

Metoda revine Adevărat pentru un formular valid, când formErrors este gol. Puteți utiliza mixin-ul importându-l în componenta Vue și adăugându-l la proprietatea mixin a obiectului 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>

Acest exemplu arată o componentă Vue scrisă folosind abordarea obiect Options. The mixinele proprietatea include toate mixurile pe care le-ați importat. În acest caz, componenta folosește metoda validateForm din formValidation mixin pentru a informa utilizatorul dacă trimiterea formularului a avut succes.

Cum se utilizează Composables

Un composable este un fișier JavaScript autonom cu funcții adaptate unor preocupări sau cerințe specifice. Puteți face pârghie API-ul pentru compoziția lui Vue într-un composable, folosind funcții precum refs și computed refs.

Acest acces la API-ul de compoziție vă permite să creați funcții care se integrează în diverse componente. Aceste funcții returnează un obiect, pe care îl puteți importa și încorpora cu ușurință în componentele Vue prin funcția de configurare a API-ului Composition.

Creați un nou fișier JavaScript în proiectul dvs src director pentru a utiliza un composable. Pentru proiecte mai mari, luați în considerare organizarea unui folder în src și crearea de fișiere JavaScript separate pentru diferite composable, asigurându-vă că numele fiecărui composable reflectă scopul său.

În interiorul fișierului JavaScript, definiți funcția de care aveți nevoie. Iată o restructurare a formValidation mixin ca compus compus:

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

Acest fragment începe prin importul funcției reactive din vue pachet. Apoi creează o funcție exportabilă, useFormValidation().

Continuă prin crearea unei variabile reactive, stat, care găzduiește proprietățile formData și formErrors. Fragmentul se ocupă apoi de validarea formularului cu o abordare foarte similară cu mixin-ul. În cele din urmă, returnează variabila de stare și funcția validateForm ca obiect.

Puteți folosi acest composable prin importul funcției JavaScript din fișier in componenta ta:

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

După importul useFormValidation composable, acest cod desstructurează obiectul JavaScript se întoarce și continuă cu validarea formularului. Avertizează dacă formularul trimis este un succes sau are erori.

Composables sunt noile mixine

În timp ce mixin-urile au fost utile în Vue 2 pentru reutilizarea codului, compozibilele le-au înlocuit în Vue 3. Composables oferă o abordare mai structurată și mai ușor de întreținut pentru reutilizarea logicii în aplicațiile Vue.js, facilitând construirea de aplicații web scalabile cu Vue.