Κατά τον προγραμματισμό, είναι σημαντικό να δομείτε τη βάση κώδικα έτσι ώστε να επαναχρησιμοποιείτε τον κώδικα όπου είναι δυνατόν. Η αντιγραφή κώδικα μπορεί να διογκώσει τη βάση κώδικα και να περιπλέξει τον εντοπισμό σφαλμάτων, ειδικά σε μεγαλύτερες εφαρμογές.
Το Vue απλοποιεί την επαναχρησιμοποίηση κώδικα μέσω composables. Τα Composables είναι συναρτήσεις που ενσωματώνουν τη λογική και μπορείτε να τα χρησιμοποιήσετε ξανά σε όλο το έργο σας για να χειριστείτε παρόμοια λειτουργικότητα.
Πίνακας περιεχομένων
Ήταν πάντα Composables;
Πριν το Vue 3 εισαγάγει τα composables, θα μπορούσατε να χρησιμοποιήσετε mixins για να καταγράψετε κώδικα και να τον επαναχρησιμοποιήσετε σε διαφορετικά μέρη της εφαρμογής σας. Τα Mixins περιείχαν επιλογές Vue.js, όπως δεδομένα, μεθόδους και άγκιστρα κύκλου ζωής, επιτρέποντας την επαναχρησιμοποίηση κώδικα σε πολλά στοιχεία.
Για να δημιουργήσετε mixins, τα δομείτε σε ξεχωριστά αρχεία και στη συνέχεια τα εφαρμόζετε σε συστατικά προσθέτοντας το mixin στην ιδιότητα mixins στο αντικείμενο επιλογές του στοιχείου. Για παράδειγμα:
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;
},
},
};
Αυτό το απόσπασμα κώδικα δείχνει τα περιεχόμενα ενός mixin για την επικύρωση φορμών. Αυτό το mixin φιλοξενεί δύο ιδιότητες δεδομένων—formData και formErrors—αρχικά ορισμένες σε κενές τιμές.
Το formData αποθηκεύει δεδομένα εισόδου για τη φόρμα, συμπεριλαμβανομένων των πεδίων ονόματος χρήστη και κωδικού πρόσβασης που αρχικοποιήθηκαν ως κενά. Το formErrors αντικατοπτρίζει αυτήν τη δομή για να διατηρεί πιθανά μηνύματα σφάλματος, επίσης αρχικά κενά.
Το mixin περιέχει επίσης μια μέθοδο, validateForm(), για να ελέγξετε ότι τα πεδία ονόματος χρήστη και κωδικού πρόσβασης δεν είναι κενά. Εάν οποιοδήποτε πεδίο είναι κενό, συμπληρώνει την ιδιότητα δεδομένων formErrors με ένα κατάλληλο μήνυμα σφάλματος.
Η μέθοδος επιστρέφει true για μια έγκυρη φόρμα, όταν το formErrors είναι κενό. Μπορείτε να χρησιμοποιήσετε το mixin εισάγοντάς το στο στοιχείο Vue και προσθέτοντάς το στην ιδιότητα mixin του αντικειμένου 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>
Αυτό το παράδειγμα δείχνει ένα στοιχείο Vue γραμμένο χρησιμοποιώντας την προσέγγιση αντικειμένου Επιλογές. Η ιδιότητα mixins περιλαμβάνει όλα τα mixins που έχετε εισαγάγει. Σε αυτήν την περίπτωση, το στοιχείο χρησιμοποιεί τη μέθοδο validateForm από το mixin formValidation για να ενημερώσει τον χρήστη εάν η υποβολή φόρμας ήταν επιτυχής.
Πώς να χρησιμοποιήσετε Composables
Το composable είναι ένα αυτόνομο αρχείο JavaScript με λειτουργίες προσαρμοσμένες σε συγκεκριμένες ανησυχίες ή απαιτήσεις. Μπορείτε να αξιοποιήσετε το API σύνθεσης του Vue μέσα σε ένα composable, χρησιμοποιώντας λειτουργίες όπως refs και υπολογισμένες αναφορές.
Αυτή η πρόσβαση στο API σύνθεσης σάς επιτρέπει να δημιουργείτε λειτουργίες που ενσωματώνονται σε διάφορα στοιχεία. Αυτές οι συναρτήσεις επιστρέφουν ένα αντικείμενο, το οποίο μπορείτε εύκολα να εισαγάγετε και να ενσωματώσετε στα στοιχεία Vue μέσω της συνάρτησης εγκατάστασης του Composition API.
Δημιουργήστε ένα νέο αρχείο JavaScript στον κατάλογο src του έργου σας για να χρησιμοποιήσετε ένα composable. Για μεγαλύτερα έργα, εξετάστε το ενδεχόμενο να οργανώσετε έναν φάκελο μέσα στο src και να δημιουργήσετε ξεχωριστά αρχεία JavaScript για διαφορετικά composables, διασφαλίζοντας ότι το όνομα κάθε composable αντανακλά τον σκοπό του.
Μέσα στο αρχείο JavaScript, ορίστε τη συνάρτηση που χρειάζεστε. Ακολουθεί μια αναδιάρθρωση της μίξης formValidation ως συνθέτη:
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,
};
}
Αυτό το απόσπασμα ξεκινάει με την εισαγωγή της reactive συνάρτησης από το πακέτο vue. Στη συνέχεια δημιουργεί μια συνάρτηση με δυνατότητα εξαγωγής, useFormValidation().
Συνεχίζει δημιουργώντας μια αντιδραστική μεταβλητή, κατάσταση, η οποία φιλοξενεί τις ιδιότητες formData και formErrors. Στη συνέχεια, το απόσπασμα χειρίζεται την επικύρωση της φόρμας με μια πολύ παρόμοια προσέγγιση με τη μίξη. Τέλος, επιστρέφει τη μεταβλητή κατάσταση και τη συνάρτηση validateForm ως αντικείμενο.
Μπορείτε να χρησιμοποιήσετε αυτό το composable εισάγοντας τη συνάρτηση JavaScript από το αρχείο στο στοιχείο σας:
<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>
Μετά την εισαγωγή του useFormValidation composable, αυτός ο κώδικας καταστρέφει το αντικείμενο JavaScript που επιστρέφει και συνεχίζει με την επικύρωση της φόρμας. Προειδοποιεί εάν η φόρμα που υποβλήθηκε είναι επιτυχής ή έχει σφάλματα.
Τα συνθέσιμα είναι τα νέα μείγματα
Ενώ τα mixins ήταν χρήσιμα στο Vue 2 για επαναχρησιμοποίηση κώδικα, τα composables τα έχουν αντικαταστήσει στο Vue 3. Τα Composables παρέχουν μια πιο δομημένη και διατηρήσιμη προσέγγιση για την επαναχρησιμοποίηση της λογικής στις εφαρμογές Vue.js, διευκολύνοντας τη δημιουργία επεκτάσιμων εφαρμογών ιστού με το Vue.