Logica hergebruiken in Vue.js met Composables

Bij het programmeren is het belangrijk om uw codebase zo te structureren dat u code waar mogelijk hergebruikt. Het dupliceren van code kan de codebasis vergroten en het opsporen van fouten bemoeilijken, vooral in grotere apps.

Vue vereenvoudigt het hergebruik van code via composables. Composables zijn functies die logica inkapselen, en u kunt ze in uw project hergebruiken om vergelijkbare functionaliteit te verwerken.

Waren het altijd composables?

Voordat Vue 3 composables introduceerde, kon je mixins gebruiken om code vast te leggen en deze in verschillende delen van je applicatie opnieuw te gebruiken. Mixins bevatten Vue.js-opties zoals gegevens, methoden en levenscyclushaken, waardoor hergebruik van code voor meerdere componenten mogelijk wordt.

Om mixins te maken, structureert u ze in afzonderlijke bestanden en past u ze vervolgens toe op componenten door de mix toe te voegen aan het mixen eigenschap binnen het optieobject van de component. Bijvoorbeeld:

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

Dit codefragment toont de inhoud van een mix voor het valideren van formulieren. Deze mix bevat twee gegevenseigenschappen:formulierGegevens En formulierfouten—aanvankelijk ingesteld op lege waarden.

formData slaat invoergegevens voor het formulier op, inclusief gebruikersnaam- en wachtwoordvelden die als leeg zijn geïnitialiseerd. formErrors weerspiegelt deze structuur om potentiële foutmeldingen vast te houden, ook in eerste instantie leeg.

De mixin bevat ook een methode, valideerForm(), om te controleren of de velden voor gebruikersnaam en wachtwoord niet leeg zijn. Als een van beide velden leeg is, wordt de gegevenseigenschap formErrors ingevuld met een passend foutbericht.

De methode keert terug WAAR voor een geldig formulier, wanneer formErrors leeg is. U kunt de mixin gebruiken door deze in uw Vue-component te importeren en toe te voegen aan de mixin-eigenschap van het Options-object:

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

Dit voorbeeld toont een Vue-component geschreven met behulp van de Options-objectbenadering. De mixen eigenschap bevat alle mixins die u hebt geïmporteerd. In dit geval gebruikt de component de methode validateForm uit de formulierValidatie mixin om de gebruiker te informeren of het indienen van het formulier succesvol was.

Composables gebruiken

Een composable is een op zichzelf staand JavaScript-bestand met functies die zijn afgestemd op specifieke problemen of vereisten. Je kunt een hefboomwerking uitoefenen De compositie-API van Vue binnen een composable, met behulp van functies zoals refs en berekende refs.

Met deze toegang tot de compositie-API kunt u functies creëren die in verschillende componenten kunnen worden geïntegreerd. Deze functies retourneren een object, dat u eenvoudig kunt importeren en opnemen in Vue-componenten via de setup-functie van de Composition API.

Maak een nieuw JavaScript-bestand in uw project src map om een ​​composable te gebruiken. Voor grotere projecten kunt u overwegen een map binnen src te organiseren en afzonderlijke JavaScript-bestanden te maken voor verschillende composables, waarbij u ervoor zorgt dat de naam van elke composable het doel weerspiegelt.

Definieer in het JavaScript-bestand de gewenste functie. Hier is een herstructurering van de formulierValidatie mixin als composable:

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

Dit fragment begint met het importeren van de reactieve functie uit de kijk pakket. Vervolgens creëert het een exporteerbare functie, gebruikFormValidation().

Het gaat verder met het creëren van een reactieve variabele, staat, waarin de eigenschappen formData en formErrors zijn ondergebracht. Het fragment verwerkt vervolgens de formuliervalidatie met een zeer vergelijkbare benadering als de mixin. Ten slotte retourneert het de statusvariabele en de validateForm-functie als een object.

U kunt deze samen te stellen door gebruiken het importeren van de JavaScript-functie uit het bestand in uw onderdeel:

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

Na het importeren van de useFormValidation composable wordt deze code destructureert het JavaScript-object het keert terug en gaat verder met de formuliervalidatie. Het waarschuwt of het ingediende formulier succesvol is of fouten bevat.

Composables zijn de nieuwe mixen

Hoewel mixins nuttig waren in Vue 2 voor hergebruik van code, hebben composables deze in Vue 3 vervangen. Composables bieden een meer gestructureerde en onderhoudbare aanpak voor het hergebruiken van logica in Vue.js-applicaties, waardoor het eenvoudiger wordt om schaalbare web-apps met Vue te bouwen.