Ako znova použiť logiku vo Vue.js s Composables

Pri programovaní je dôležité štrukturovať svoju kódovú základňu tak, aby ste kód znova použili tam, kde je to možné. Duplikovanie kódu môže nafúknuť kódovú základňu a skomplikovať ladenie, najmä vo väčších aplikáciách.

Vue zjednodušuje opätovné použitie kódu prostredníctvom skladateľných materiálov. Skladateľné funkcie sú funkcie, ktoré zapuzdrujú logiku a môžete ich opakovane použiť vo svojom projekte na zvládnutie podobných funkcií.

Bolo to vždy skladateľné?

Predtým, ako Vue 3 predstavil skladateľné prvky, ste mohli použiť mixiny na zachytenie kódu a jeho opätovné použitie v rôznych častiach vašej aplikácie. Mixins obsiahnuté Možnosti Vue.js, ako sú údaje, metódy a háčiky životného cyklu, čo umožňuje opätovné použitie kódu vo viacerých komponentoch.

Ak chcete vytvoriť mixiny, štruktúrujte ich do samostatných súborov a potom ich aplikujte na komponenty pridaním mixinu do zmesi vlastnosť v rámci objektu options komponentu. Napríklad:

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

Tento útržok kódu zobrazuje obsah mixu na overenie formulárov. Tento mix obsahuje dve dátové vlastnosti —formData a formErrors—pôvodne nastavené na prázdne hodnoty.

formData ukladá vstupné údaje pre formulár vrátane polí pre meno používateľa a heslo, ktoré sú inicializované ako prázdne. formErrors zrkadlí túto štruktúru, aby obsahovala potenciálne chybové správy, ktoré sú tiež spočiatku prázdne.

Mixin obsahuje aj metódu, validateForm(), aby ste skontrolovali, či polia používateľského mena a hesla nie sú prázdne. Ak je niektoré z polí prázdne, vyplní údajovú vlastnosť formErrors príslušným chybovým hlásením.

Metóda sa vráti pravda pre platný formulár, keď je formulárErrors prázdny. Mixin môžete použiť tak, že ho importujete do svojho komponentu Vue a pridáte ho do vlastnosti mixin objektu Options:

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

Tento príklad ukazuje komponent Vue napísaný pomocou objektového prístupu Options. The zmesi vlastnosť zahŕňa všetky mixiny, ktoré ste importovali. V tomto prípade komponent používa metódu validateForm z formValidation mixin informovať používateľa, či bolo odoslanie formulára úspešné.

Ako používať skladateľné materiály

Skladateľný súbor je samostatný súbor JavaScript s funkciami prispôsobenými špecifickým problémom alebo požiadavkám. Môžete využiť API na zloženie Vue v rámci zostaviteľného, ​​pomocou funkcií, ako sú referencie a vypočítané referencie.

Tento prístup ku kompozícii API vám umožňuje vytvárať funkcie, ktoré sa integrujú do rôznych komponentov. Tieto funkcie vracajú objekt, ktorý môžete ľahko importovať a začleniť do komponentov Vue prostredníctvom funkcie nastavenia rozhrania Composition API.

Vytvorte nový súbor JavaScript vo svojom projekte src na použitie skladateľného adresára. Pri väčších projektoch zvážte organizáciu priečinka v rámci src a vytvorenie samostatných súborov JavaScript pre rôzne zostaviteľné položky, pričom zaistite, aby názov každej zostaviteľnej položky odrážal jej účel.

Vo vnútri súboru JavaScript definujte požadovanú funkciu. Tu je reštrukturalizácia formValidation zmiešať ako zložiteľné:

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

Tento úryvok začína importovaním reaktívnej funkcie z vue balík. Potom vytvorí exportovateľnú funkciu, useFormValidation().

Pokračuje vytvorením reaktívnej premennej, štát, ktorý obsahuje vlastnosti formData a formErrors. Útržok potom spracováva overenie formulára s veľmi podobným prístupom ako mixin. Nakoniec vráti stavovú premennú a funkciu validateForm ako objekt.

Tento skladateľný môžete použiť importovanie funkcie JavaScript zo súboru vo vašom komponente:

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

Po importovaní zložiteľného useFormValidation tento kód deštruktúruje objekt JavaScript vráti sa a pokračuje v overovaní formulára. Upozorní, či je odoslaný formulár úspešný alebo obsahuje chyby.

Composables sú nové mixiny

Zatiaľ čo mixiny boli užitočné vo Vue 2 na opätovné použitie kódu, vo Vue 3 ich nahradili skladateľné. Composables poskytujú štruktúrovanejší a udržiavateľnejší prístup k opätovnému použitiu logiky v aplikáciách Vue.js, čo uľahčuje vytváranie škálovateľných webových aplikácií pomocou Vue.