Jak znovu použít logiku ve Vue.js s Composables

Při programování je důležité strukturovat svou kódovou základnu tak, abyste kód znovu používali, kde je to možné. Duplikování kódu může nafouknout kódovou základnu a zkomplikovat ladění, zejména ve větších aplikacích.

Vue zjednodušuje opětovné použití kódu prostřednictvím komposovatelných položek. Composables jsou funkce, které zapouzdřují logiku, a můžete je znovu použít ve svém projektu ke zpracování podobných funkcí.

Bylo to vždy složitelné?

Předtím, než Vue 3 představil skládací prvky, jste mohli používat mixiny k zachycení kódu a jeho opětovnému použití v různých částech vaší aplikace. Mixiny obsaženy Možnosti Vue.js, jako jsou data, metody a háčky životního cyklu, což umožňuje opětovné použití kódu napříč více komponentami.

Chcete-li vytvořit mixiny, musíte je strukturovat do samostatných souborů a poté je aplikovat na komponenty přidáním mixinu do mixiny vlastnost v rámci objektu options komponenty. Napří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 fragment kódu zobrazuje obsah mixinu pro ověřování formulářů. Tento mix obsahuje dvě vlastnosti dat —formData a formErrors—zpočátku nastaven na prázdné hodnoty.

formData ukládá vstupní data pro formulář, včetně polí uživatelského jména a hesla, která jsou inicializována jako prázdná. formErrors zrcadlí tuto strukturu, aby obsahovala potenciální chybové zprávy, také zpočátku prázdné.

Mixin také obsahuje metodu, validateForm(), abyste zkontrolovali, že pole uživatelského jména a hesla nejsou prázdná. Pokud je některé pole prázdné, vyplní datovou vlastnost formErrors příslušnou chybovou zprávou.

Metoda se vrací skutečný pro platný formulář, když je formulářErrors prázdný. Mixin můžete použít jeho importem do vaší komponenty Vue a přidáním 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 příklad ukazuje komponentu Vue napsanou pomocí objektového přístupu Options. The mixiny vlastnost zahrnuje všechny mixiny, které jste importovali. V tomto případě komponenta používá metodu validateForm z formValidation mixin informovat uživatele, zda bylo odeslání formuláře úspěšné.

Jak používat Composables

Composable je samostatný soubor JavaScript s funkcemi přizpůsobenými konkrétním zájmům nebo požadavkům. Můžete využít API pro složení Vue v rámci komposovatelného pomocí funkcí, jako jsou reference a vypočítané reference.

Tento přístup k API kompozice vám umožňuje vytvářet funkce, které se integrují do různých komponent. Tyto funkce vracejí objekt, který můžete snadno importovat a začlenit do komponent Vue prostřednictvím funkce nastavení Composition API.

Vytvořte nový soubor JavaScript ve vašem projektu src adresář pro použití komposovatelného. U větších projektů zvažte uspořádání složky v rámci src a vytvoření samostatných souborů JavaScriptu pro různé sestavitelné položky, přičemž zajistěte, aby název každé sestavy odpovídal jejímu účelu.

V souboru JavaScript definujte funkci, kterou požadujete. Zde je restrukturalizace formValidation mixin jako složitelný:

// 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 fragment začíná importem reaktivní funkce z vue balík. Poté vytvoří exportovatelnou funkci, useFormValidation().

Pokračuje vytvořením reaktivní proměnné, Stát, který obsahuje vlastnosti formData a formErrors. Fragment pak zpracovává ověření formuláře velmi podobným přístupem jako mixin. Nakonec vrátí stavovou proměnnou a funkci validateForm jako objekt.

Můžete použít tento skládací podle import funkce JavaScript ze souboru ve vaší 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>

Po importu sestavitelného useFormValidation tento kód destruuje objekt JavaScriptu vrátí se a pokračuje v ověřování formuláře. Upozorní, zda je odeslaný formulář úspěšný nebo obsahuje chyby.

Composables jsou nové mixiny

Zatímco mixiny byly užitečné ve Vue 2 pro opětovné použití kódu, komposovatelné je nahradily ve Vue 3. Composables poskytují strukturovanější a udržitelnější přístup k opětovnému použití logiky v aplikacích Vue.js, což usnadňuje vytváření škálovatelných webových aplikací s Vue.