Hur man återanvänder logik i Vue.js med kompositer

Vid programmering är det viktigt att strukturera din kodbas så att du återanvänder kod där det är möjligt. Duplicering av kod kan svälla kodbasen och komplicera felsökning, särskilt i större appar.

Vue förenklar kodåteranvändning genom kompositer. Composables är funktioner som kapslar in logik, och du kan återanvända dem i hela ditt projekt för att hantera liknande funktionalitet.

Var det alltid kompositioner?

Innan Vue 3 introducerade composables kunde du använda mixins för att fånga kod och återanvända den i olika delar av din applikation. Blandningar innehöll Vue.js-alternativ som data, metoder och livscykelhakar, vilket möjliggör återanvändning av kod över flera komponenter.

För att skapa mixin strukturerar du dem i separata filer och applicerar dem sedan på komponenter genom att lägga till mixin till blandningar egenskap inom komponentens optionsobjekt. Till exempel:

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

Detta kodavsnitt visar innehållet i en mixin för validering av formulär. Denna mixin innehåller två dataegenskaper—formData och formfel— initialt inställd på tomma värden.

formData lagrar indata för formuläret, inklusive användarnamn och lösenordsfält initialiserade som tomma. formErrors speglar denna struktur för att hålla potentiella felmeddelanden, även initialt tomma.

Blandningen innehåller också en metod, validateForm(), för att kontrollera att fälten för användarnamn och lösenord inte är tomma. Om något av fälten är tomt, fyller det i formErrors dataegenskapen med ett lämpligt felmeddelande.

Metoden återkommer Sann för ett giltigt formulär, när formErrors är tomt. Du kan använda mixin genom att importera den till din Vue-komponent och lägga till den i mixin-egenskapen för 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>

Det här exemplet visar en Vue-komponent skriven med Options-objektmetoden. De blandningar egenskapen inkluderar alla mixins du har importerat. I det här fallet använder komponenten metoden validateForm från formValidation mixin för att informera användaren om inlämningen av formuläret lyckades.

Hur man använder kompositer

En composable är en fristående JavaScript-fil med funktioner som är skräddarsydda för specifika problem eller krav. Du kan utnyttja Vues sammansättning API inom en komponerbar, med hjälp av funktioner som refs och beräknade refs.

Denna åtkomst till kompositions-API: et låter dig skapa funktioner som integreras i olika komponenter. Dessa funktioner returnerar ett objekt, som du enkelt kan importera och införliva i Vue-komponenter genom inställningsfunktionen i Composition API.

Skapa en ny JavaScript-fil i ditt projekts src katalog för att använda en komponerbar. För större projekt kan du överväga att organisera en mapp inom src och skapa separata JavaScript-filer för olika kompositioner, och se till att varje kompositions namn reflekterar dess syfte.

Inuti JavaScript-filen, definiera den funktion du behöver. Här är en omstrukturering av formValidation mixin som en komponerbar:

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

Detta utdrag börjar med att importera den reaktiva funktionen från vue paket. Det skapar sedan en exporterbar funktion, useFormValidation().

Det fortsätter genom att skapa en reaktiv variabel, stat, som innehåller egenskaperna formData och formErrors. Utdraget hanterar sedan formulärvalideringen med ett mycket liknande tillvägagångssätt som mixin. Slutligen returnerar den tillståndsvariabeln och funktionen validateForm som ett objekt.

Du kan använda denna komponerbara av importera JavaScript-funktionen från 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 av useFormValidation composable, denna kod destrukturerar JavaScript-objektet den återkommer och fortsätter med formulärvalideringen. Den varnar om det inskickade formuläret är framgångsrikt eller innehåller fel.

Composables är de nya mixinerna

Medan mixins var användbara i Vue 2 för kodåteranvändning, har kompositer ersatta dem i Vue 3. Composables ger en mer strukturerad och underhållbar metod för att återanvända logik i Vue.js-applikationer, vilket gör det lättare att bygga skalbara webbappar med Vue.