Sådan genbruger du logik i Vue.js med kompositabler

Når du programmerer, er det vigtigt at strukturere din kodebase, så du genbruger kode, hvor det er muligt. Duplikering af kode kan blæse kodebasen op og komplicere fejlfinding, især i større apps.

Vue forenkler genbrug af kode gennem composables. Composables er funktioner, der indkapsler logik, og du kan genbruge dem på tværs af dit projekt til at håndtere lignende funktionalitet.

Var det altid komponerbare?

Før Vue 3 introducerede composables, kunne du bruge mixins til at fange kode og genbruge den i forskellige dele af din applikation. Mixins indeholdt Vue.js muligheder såsom data, metoder og livscyklus kroge, hvilket muliggør genbrug af kode på tværs af flere komponenter.

For at oprette mixins skal du strukturere dem i separate filer og derefter anvende dem på komponenter ved at tilføje mixin til blandinger egenskab inden for komponentens optionsobjekt. 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;
 },
 },
};

Dette kodestykke viser indholdet af et mixin til validering af formularer. Denne blanding rummer to dataegenskaber—formData og formFejl— oprindeligt indstillet til tomme værdier.

formData gemmer inputdata til formularen, inklusive brugernavn og adgangskode felter initialiseret som tomme. formErrors afspejler denne struktur for at holde potentielle fejlmeddelelser, også i starten tomme.

Blandingen indeholder også en metode, validerForm(), for at kontrollere, at felterne med brugernavn og adgangskode ikke er tomme. Hvis et af felterne er tomt, udfylder det formErrors-dataegenskaben med en passende fejlmeddelelse.

Metoden vender tilbage rigtigt for en gyldig formular, når formErrors er tom. Du kan bruge mixin ved at importere den til din Vue-komponent og tilføje den til mixin-egenskaben for 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 eksempel viser en Vue-komponent skrevet ved hjælp af Options-objekttilgangen. Det blandinger egenskaben inkluderer alle de mixins, du har importeret. I dette tilfælde bruger komponenten validateForm-metoden fra formValidation mixin for at informere brugeren om, hvorvidt formularindsendelsen lykkedes.

Sådan bruges kompositabler

En composable er en selvstændig JavaScript-fil med funktioner, der er skræddersyet til specifikke bekymringer eller krav. Du kan udnytte Vues sammensætning API inden for en komponerbar, ved hjælp af funktioner som refs og beregnede refs.

Denne adgang til sammensætnings-API'en giver dig mulighed for at oprette funktioner, der integreres i forskellige komponenter. Disse funktioner returnerer et objekt, som du nemt kan importere og inkorporere i Vue-komponenter gennem opsætningsfunktionen i Composition API.

Opret en ny JavaScript-fil i dit projekts src mappe for at bruge en komponerbar. For større projekter kan du overveje at organisere en mappe i src og oprette separate JavaScript-filer til forskellige komponabler, og sikre dig, at hver komponibels navn afspejler dens formål.

Inde i JavaScript-filen skal du definere den funktion, du har brug for. Her er en omstrukturering af formValidation 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,
 };
}

Dette uddrag begynder med at importere den reaktive funktion fra vue pakke. Det opretter derefter en eksporterbar funktion, useFormValidation().

Det fortsætter ved at skabe en reaktiv variabel, stat, som huser egenskaberne formData og formErrors. Uddraget håndterer derefter formularvalideringen med en meget lignende tilgang til mixin. Til sidst returnerer den tilstandsvariablen og validateForm-funktionen som et objekt.

Du kan bruge denne komponerbare ved import af JavaScript-funktionen fra filen i din 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>

Efter import af useFormValidation composable, denne kode destrukturerer JavaScript-objektet den vender tilbage og fortsætter med formularvalideringen. Den advarer, om den indsendte formular er en succes eller har fejl.

Composables er de nye mixins

Mens mixins var nyttige i Vue 2 til genbrug af kode, har composables erstattet dem i Vue 3. Composables giver en mere struktureret og vedligeholdelig tilgang til genbrug af logik i Vue.js-applikationer, hvilket gør det nemmere at bygge skalerbare webapps med Vue.