A Vue.js logikájának újrafelhasználása a Composables segítségével

A programozás során fontos a kódbázis felépítése úgy, hogy lehetőség szerint újra felhasználja a kódot. A duplikált kód felduzzaszthatja a kódbázist, és bonyolíthatja a hibakeresést, különösen a nagyobb alkalmazásokban.

A Vue leegyszerűsíti a kód újrafelhasználását a kompozíciókon keresztül. Az összeállítható funkciók logikát magukba foglaló függvények, amelyeket a projektben újra felhasználhat hasonló funkciók kezelésére.

Mindig összeállítható volt?

Mielőtt a Vue 3 bemutatta volna a kompozíciókat, mixineket használhatott a kód rögzítésére, és az alkalmazás különböző részein történő újrafelhasználására. Mixineket tartalmazott Vue.js-beállítások, például adatok, módszerek és életciklus-horogok, amely lehetővé teszi a kód újrafelhasználását több összetevő között.

A mixinek létrehozásához külön fájlba kell őket strukturálni, majd alkalmazni kell őket a komponensekre úgy, hogy hozzáadja a mixint a mixins tulajdonság az összetevő beállításai objektumon belül. Például:

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

Ez a kódrészlet az űrlapok érvényesítésére szolgáló mixin tartalmát mutatja. Ez a mix két adattulajdonságot tartalmaz:formData és formErrors— kezdetben üres értékekre állítva.

A formData az űrlap bemeneti adatait tárolja, beleértve az üresen inicializált felhasználónév- és jelszómezőket. A formErrors ezt a struktúrát tükrözi, hogy tárolja a potenciális hibaüzeneteket, amelyek kezdetben szintén üresek.

A mixin egy módszert is tartalmaz, validateForm(), hogy ellenőrizze, hogy a felhasználónév és jelszó mező nem üres-e. Ha bármelyik mező üres, akkor a formErrors adattulajdonságot egy megfelelő hibaüzenettel tölti fel.

A metódus visszatér igaz érvényes űrlap esetén, ha a formErrors üres. A mixint úgy használhatja, hogy importálja a Vue komponensébe, és hozzáadja az Options objektum mixin tulajdonságához:

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

Ez a példa egy Vue-összetevőt mutat be, amelyet a Beállítások objektum megközelítéssel írtak. A mixins tulajdonság tartalmazza az összes importált mixint. Ebben az esetben a komponens a valideForm metódust használja a formValidation mixin, hogy tájékoztassa a felhasználót, hogy sikeres volt-e az űrlap elküldése.

Hogyan használjuk a kompozíciókat

Az összeállítható egy önálló JavaScript-fájl, amelynek funkciói az adott szempontokhoz vagy követelményekhez vannak szabva. Tudod kihasználni A Vue összetétele API egy kompozíción belül, olyan szolgáltatások használatával, mint a refs és a számított refs.

A kompozíció API-hoz való hozzáférés lehetővé teszi olyan funkciók létrehozását, amelyek különböző összetevőkbe integrálódnak. Ezek a függvények egy objektumot adnak vissza, amelyet könnyen importálhat és beépíthet a Vue-összetevőkbe a Composition API beállítási funkcióján keresztül.

Hozzon létre egy új JavaScript-fájlt a projektben src könyvtárat egy összeírható használatához. Nagyobb projektek esetén fontolja meg egy mappa src-n belüli rendszerezését, és külön JavaScript-fájlok létrehozását a különböző kompozíciókhoz, biztosítva, hogy az egyes kompozíciók neve tükrözze a célját.

A JavaScript fájlban határozza meg a kívánt függvényt. Íme a szerkezetátalakítás formValidation összekeverhető:

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

Ez a részlet a reaktív függvény importálásával kezdődik a vue csomag. Ezután létrehoz egy exportálható függvényt, useFormValidation().

Egy reaktív változó létrehozásával folytatódik, állapot, amely a formData és a formErrors tulajdonságokat tartalmazza. A kódrészlet ezután a mixinhez nagyon hasonló megközelítéssel kezeli az űrlap érvényesítését. Végül objektumként adja vissza az állapotváltozót és a validateForm függvényt.

Ezt a kompozíciót használhatja a JavaScript függvény importálása a fájlból az összetevőjében:

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

A useFormValidation kompozíció importálása után ez a kód tönkreteszi a JavaScript objektumot visszatér és folytatja az űrlap érvényesítését. Figyelmeztet, hogy a beküldött űrlap sikeres volt-e vagy hibákat tartalmaz.

A kompozíciók az új mixek

Míg a mixinek hasznosak voltak a Vue 2-ben a kód újrafelhasználásához, a Vue 3-ban az összeállíthatók váltották fel őket. A Composables strukturáltabb és karbantarthatóbb megközelítést biztosít a logika újrafelhasználásához a Vue.js alkalmazásokban, megkönnyítve a méretezhető webalkalmazások Vue-val történő létrehozását.