Hvordan gjenbruke logikk i Vue.js med kompositabler

Når du programmerer, er det viktig å strukturere kodebasen din slik at du gjenbruker kode der det er mulig. Duplisering av kode kan blåse opp kodebasen og komplisere feilsøking, spesielt i større apper.

Vue forenkler gjenbruk av kode gjennom kompositabler. Composables er funksjoner som innkapsler logikk, og du kan gjenbruke dem på tvers av prosjektet for å håndtere lignende funksjonalitet.

Var det alltid komponerbare?

Før Vue 3 introduserte composables, kunne du bruke mixins til å fange kode og gjenbruke den i forskjellige deler av applikasjonen din. Mixins inneholdt Vue.js-alternativer som data, metoder og livssykluskroker, som muliggjør gjenbruk av kode på tvers av flere komponenter.

For å lage mixins, strukturerer du dem i separate filer og bruker dem deretter på komponenter ved å legge til mixin til blandinger egenskap innenfor komponentens opsjonsobjekt. For eksempel:

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

Denne kodebiten viser innholdet i en blanding for validering av skjemaer. Denne blandingen inneholder to dataegenskaper—formData og formFeil– opprinnelig satt til tomme verdier.

formData lagrer inndata for skjemaet, inkludert brukernavn- og passordfelt initialisert som tomme. formErrors speiler denne strukturen for å holde potensielle feilmeldinger, også i utgangspunktet tomme.

Blandingen inneholder også en metode, validateForm(), for å sjekke at brukernavn- og passordfeltene ikke er tomme. Hvis et av feltene er tomt, fyller det formErrors-dataegenskapen med en passende feilmelding.

Metoden kommer tilbake ekte for et gyldig skjema, når formErrors er tom. Du kan bruke mixin ved å importere den til Vue-komponenten din og legge den til mixin-egenskapen til Options-objektet:

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

Dette eksemplet viser en Vue-komponent skrevet ved hjelp av Options-objekttilnærmingen. De blandinger egenskapen inkluderer alle blandingene du har importert. I dette tilfellet bruker komponenten validateForm-metoden fra formValidering mixin for å informere brukeren om innsending av skjema var vellykket.

Hvordan bruke kompositabler

En composable er en selvstendig JavaScript-fil med funksjoner som er skreddersydd for spesifikke bekymringer eller krav. Du kan utnytte Vues komposisjons-API i en komponerbar, ved å bruke funksjoner som refs og beregnede refs.

Denne tilgangen til komposisjons-APIet lar deg lage funksjoner som integreres i ulike komponenter. Disse funksjonene returnerer et objekt, som du enkelt kan importere og integrere i Vue-komponenter gjennom oppsettfunksjonen til Composition API.

Opprett en ny JavaScript-fil i prosjektet ditt src katalog for å bruke en komponerbar. For større prosjekter bør du vurdere å organisere en mappe i src og lage separate JavaScript-filer for forskjellige kompositabler, for å sikre at navnet til hver komponibel gjenspeiler formålet.

Inne i JavaScript-filen, definer funksjonen du trenger. Her er en restrukturering av formValidering mixin som en komponibel:

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

Denne kodebiten begynner med å importere den reaktive funksjonen fra vue pakke. Den oppretter deretter en eksporterbar funksjon, useFormValidation().

Det fortsetter ved å lage en reaktiv variabel, stat, som inneholder egenskapene formData og formErrors. Kodebiten håndterer deretter skjemavalideringen med en veldig lik tilnærming til mixin. Til slutt returnerer den tilstandsvariabelen og validateForm-funksjonen som et objekt.

Du kan bruke denne komponerbare av importere JavaScript-funksjonen fra filen i komponenten din:

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

Etter å ha importert useFormValidation composable, denne koden destrukturerer JavaScript-objektet den kommer tilbake og fortsetter med skjemavalideringen. Den varsler om det innsendte skjemaet er vellykket eller har feil.

Composables er de nye mixinene

Mens mixins var nyttige i Vue 2 for gjenbruk av kode, har kompositabler erstattet dem i Vue 3. Composables gir en mer strukturert og vedlikeholdbar tilnærming til gjenbruk av logikk i Vue.js-applikasjoner, noe som gjør det enklere å bygge skalerbare nettapper med Vue.