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ść.
Spis treści:
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. Mieszanki zawierały 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 miksin do właściwości mixins w obiekcie opcji komponentu. Na przykład:
export const 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.';
}
return Object.keys(this.formErrors).length === 0;
},
},
};
Ten fragment kodu pokazuje zawartość miksu do sprawdzania poprawności formularzy. W tym zestawie znajdują się dwie właściwości danych — formData i formErrors — 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 także metodę validForm(), która pozwala 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 zwraca wartość true 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>
<label for="username">Username:</label>
<input type="text" id="username" v-model="formData.username" />
<span class="error">{{ formErrors.username }}</span>
</div><div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="formData.password" />
<span class="error">{{ formErrors.password }}</span>
</div><button type="submit">Submit</button>
</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. Właściwość mixins zawiera wszystkie zaimportowane miksy. W tym przypadku komponent wykorzystuje metodę validForm z miksu formValidation, aby poinformować użytkownika, czy przesłanie formularza zakończyło się pomyślnie.
Jak korzystać z materiałów kompozytowych
Plik kompozytorski to samodzielny plik JavaScript z funkcjami dostosowanymi do konkretnych problemów lub wymagań. Możesz wykorzystać interfejs API kompozycji Vue w komponowanym obiekcie, korzystając z takich funkcji, jak referencje i obliczone referencje.
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 API Composition.
Utwórz nowy plik JavaScript w katalogu src swojego projektu, aby 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 formularzaValidation mixin jako elementu nadającego się do komponowania:
import { reactive } from 'vue';export function useFormValidation() {
const state = reactive({
formData: {
username: '',
password: '',
},
formErrors: {
username: '',
password: '',
},
});function validateForm() {
state.formErrors = {};if (!state.formData.username.trim()) {
state.formErrors.username="Username is required.";
}if (!state.formData.password.trim()) {
state.formErrors.password = 'Password is required.';
}return Object.keys(state.formErrors).length === 0;
}return {
state,
validateForm,
};
}
Ten fragment zaczyna się od zaimportowania funkcji reaktywnej z pakietu vue. Następnie tworzy funkcję, którą można eksportować, useFormValidation().
Kontynuuje, tworząc zmienną reaktywną stan, w której 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 komponentu, importując funkcję JavaScript z pliku w swoim komponencie:
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="state.formData.username" />
<span class="error">{{ state.formErrors.username }}</span>
</div><div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="state.formData.password" />
<span class="error">{{ state.formErrors.password }}</span>
</div><button type="submit">Submit</button>
</form>
</div>
</template><script setup>
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 elementu składowego useFormValidation kod ten niszczy zwracany obiekt JavaScript i kontynuuje sprawdzanie poprawności formularza. Ostrzega, czy przesłany formularz zakończył się sukcesem lub zawiera błędy.
Kompozyty to nowe miksy
Chociaż miksy były przydatne w Vue 2 do ponownego wykorzystania kodu, komponenty composable zastąpiły je w Vue 3. 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.