So verwenden Sie Logik in Vue.js mit Composables wieder

Beim Programmieren ist es wichtig, Ihre Codebasis so zu strukturieren, dass Sie Code nach Möglichkeit wiederverwenden. Das Duplizieren von Code kann die Codebasis aufblähen und das Debuggen erschweren, insbesondere bei größeren Apps.

Vue vereinfacht die Wiederverwendung von Code durch Composables. Composables sind Funktionen, die Logik kapseln, und Sie können sie in Ihrem Projekt wiederverwenden, um ähnliche Funktionen zu verarbeiten.

Waren es immer Composables?

Bevor Vue 3 Composables einführte, konnten Sie Mixins verwenden, um Code zu erfassen und ihn in verschiedenen Teilen Ihrer Anwendung wiederzuverwenden. Mixins enthalten Vue.js-Optionen wie Daten, Methoden und Lebenszyklus-Hooks, wodurch die Wiederverwendung von Code über mehrere Komponenten hinweg ermöglicht wird.

Um Mixins zu erstellen, strukturieren Sie sie in separaten Dateien und wenden sie dann auf Komponenten an, indem Sie das Mixin zu hinzufügen

Mixins Eigenschaft innerhalb des Optionsobjekts der Komponente. Zum Beispiel:

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

Dieses Code-Snippet zeigt den Inhalt eines Mixins zur Validierung von Formularen. Dieses Mixin enthält zwei Dateneigenschaften:Formulardaten Und formErrors– ursprünglich auf leere Werte gesetzt.

formData speichert Eingabedaten für das Formular, einschließlich der zunächst leeren Benutzernamen- und Passwortfelder. formErrors spiegelt diese Struktur wider, um potenzielle Fehlermeldungen zu speichern, die zunächst ebenfalls leer sind.

Das Mixin enthält auch eine Methode, validierenForm(), um zu überprüfen, ob die Felder Benutzername und Passwort nicht leer sind. Wenn eines der Felder leer ist, wird die Dateneigenschaft formErrors mit einer entsprechenden Fehlermeldung gefüllt.

Die Methode gibt zurück WAHR für ein gültiges Formular, wenn formErrors leer ist. Sie können das Mixin verwenden, indem Sie es in Ihre Vue-Komponente importieren und zur Mixin-Eigenschaft des Optionsobjekts hinzufügen:

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

Dieses Beispiel zeigt eine Vue-Komponente, die mit dem Optionsobjektansatz geschrieben wurde. Der Mixins Die Eigenschaft enthält alle von Ihnen importierten Mixins. In diesem Fall verwendet die Komponente die Methode „validateForm“ aus dem formValidierung mixin, um den Benutzer darüber zu informieren, ob die Formularübermittlung erfolgreich war.

So verwenden Sie Composables

Ein Composable ist eine in sich geschlossene JavaScript-Datei mit Funktionen, die auf bestimmte Anliegen oder Anforderungen zugeschnitten sind. Sie können nutzen Vues Kompositions-API innerhalb eines Composable unter Verwendung von Funktionen wie Refs und berechneten Refs.

Durch diesen Zugriff auf die Kompositions-API können Sie Funktionen erstellen, die in verschiedene Komponenten integriert werden. Diese Funktionen geben ein Objekt zurück, das Sie über die Setup-Funktion der Composition API problemlos importieren und in Vue-Komponenten integrieren können.

Erstellen Sie eine neue JavaScript-Datei in Ihrem Projekt src Verzeichnis, um ein Composable zu verwenden. Erwägen Sie bei größeren Projekten die Organisation eines Ordners innerhalb von src und die Erstellung separater JavaScript-Dateien für verschiedene Composables, um sicherzustellen, dass der Name jedes Composables seinen Zweck widerspiegelt.

Definieren Sie in der JavaScript-Datei die gewünschte Funktion. Hier ist eine Umstrukturierung der formValidierung Mixin als Composable:

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

Dieses Snippet beginnt mit dem Importieren der reaktiven Funktion aus vue Paket. Anschließend wird eine exportierbare Funktion erstellt. useFormValidation().

Anschließend wird eine reaktive Variable erstellt. Zustand, in dem sich die Eigenschaften formData und formErrors befinden. Das Snippet übernimmt dann die Formularvalidierung mit einem sehr ähnlichen Ansatz wie das Mixin. Schließlich werden die Statusvariable und die Funktion „validateForm“ als Objekt zurückgegeben.

Sie können dieses Composable by verwenden Importieren der JavaScript-Funktion aus der Datei in Ihrer 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>

Nach dem Importieren des zusammensetzbaren useFormValidation-Elements wird dieser Code angezeigt zerstört das JavaScript-Objekt Es kehrt zurück und fährt mit der Formularvalidierung fort. Es benachrichtigt Sie darüber, ob das übermittelte Formular erfolgreich war oder Fehler aufweist.

Composables sind die neuen Mixins

Während Mixins in Vue 2 für die Wiederverwendung von Code nützlich waren, wurden sie in Vue 3 durch Composables ersetzt. Composables bieten einen strukturierteren und wartbareren Ansatz für die Wiederverwendung von Logik in Vue.js-Anwendungen und erleichtern so die Erstellung skalierbarer Webanwendungen mit Vue.