Jak ponownie wykorzystać logikę w Vue.js z elementami Composable

Podczas programowania ważne jest zorganizowanie bazy kodu w taki sposób, aby w miarę możliwości ponownie go używać. Powielanie kodu może rozdęć bazę kodu i skomplikować debugowanie, szczególnie w większych aplikacjach.

Vue upraszcza ponowne wykorzystanie kodu poprzez elementy kompozytorskie. Kompozyty to funkcje, które hermetyzują logikę i można ich ponownie używać w całym projekcie, aby obsługiwać podobną funkcjonalność.

Czy zawsze były to produkty komponowalne?

Zanim w Vue 3 wprowadzono elementy kompozytowe, można było używać miksów do przechwytywania kodu i ponownego wykorzystania go w różnych częściach aplikacji. Zawiera miksy Opcje Vue.js, takie jak dane, metody i punkty zaczepienia cyklu życia, umożliwiając ponowne wykorzystanie kodu w wielu komponentach.

Aby utworzyć miksy, należy je uporządkować w oddzielnych plikach, a następnie zastosować do komponentów, dodając miks do pliku miksy właściwość w obiekcie opcji komponentu. Na przykład:

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

Ten fragment kodu pokazuje zawartość miksu do sprawdzania poprawności formularzy. W tym miksie znajdują się dwie właściwości danych —tworzyć dane I formularzBłędy— początkowo ustawione na puste wartości.

formData przechowuje dane wejściowe formularza, w tym pola nazwy użytkownika i hasła zainicjowane jako puste. formErrors odzwierciedla tę strukturę, aby przechowywać potencjalne komunikaty o błędach, również początkowo puste.

Mieszanka zawiera również metodę, zweryfikuj formularz(), aby sprawdzić, czy pola nazwy użytkownika i hasła nie są puste. Jeśli którekolwiek pole jest puste, właściwość danych formErrors jest wypełniana odpowiednim komunikatem o błędzie.

Metoda powraca PRAWDA dla prawidłowego formularza, gdy formErrors jest pusty. Możesz użyć miksu, importując go do komponentu Vue i dodając do właściwości mixin obiektu 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>

Ten przykład pokazuje komponent Vue napisany przy użyciu podejścia obiektowego Options. The miksy property zawiera wszystkie zaimportowane miksy. W tym przypadku komponent korzysta z metody validForm z pliku Walidacja formularza mixin, aby poinformować użytkownika, czy przesłanie formularza powiodło się.

Jak korzystać z materiałów kompozytowych

Plik kompozytorski to samodzielny plik JavaScript z funkcjami dostosowanymi do konkretnych problemów lub wymagań. Możesz wykorzystać API kompozycji Vue w ramach komponowalnego, używając funkcji takich jak refs i obliczone refes.

Dostęp do API kompozycji umożliwia tworzenie funkcji integrujących się z różnymi komponentami. Funkcje te zwracają obiekt, który można łatwo zaimportować i włączyć do komponentów Vue za pomocą funkcji konfiguracji interfejsu Composition API.

Utwórz nowy plik JavaScript w swoim projekcie źródło katalog, w którym chcesz użyć pliku composable. W przypadku większych projektów rozważ zorganizowanie folderu w src i utworzenie oddzielnych plików JavaScript dla różnych obiektów kompozytorskich, upewniając się, że nazwa każdego obiektu kompozytorskiego odzwierciedla jego przeznaczenie.

W pliku JavaScript zdefiniuj wymaganą funkcję. Oto restrukturyzacja Walidacja formularza miksowanie jako materiał do komponowania:

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

Ten fragment zaczyna się od zaimportowania funkcji reaktywnej z pliku vue pakiet. Następnie tworzy funkcję, którą można wyeksportować, użyjFormValidation().

Kontynuuje, tworząc zmienną reaktywną, państwo, w którym znajdują się właściwości formData i formErrors. Następnie fragment kodu obsługuje weryfikację formularza, stosując podejście bardzo podobne do miksowania. Na koniec zwraca zmienną stanu i funkcję validForm jako obiekt.

Możesz użyć tego narzędzia do komponowania importowanie funkcji JavaScript z pliku w swoim komponencie:

<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 zaimportowaniu zestawu useFormValidation ten kod niszczy obiekt JavaScript powraca i kontynuuje walidację formularza. Ostrzega, czy przesłany formularz zakończył się sukcesem lub zawiera błędy.

Kompozyty to nowe miksy

Podczas gdy miksy były przydatne w Vue 2 do ponownego wykorzystania kodu, w Vue 3 zastąpiły je elementy kompozytorskie. Kompozyty zapewniają bardziej uporządkowane i łatwiejsze w utrzymaniu podejście do ponownego wykorzystania logiki w aplikacjach Vue.js, ułatwiając tworzenie skalowalnych aplikacji internetowych za pomocą Vue.