Πώς να επαναχρησιμοποιήσετε τη λογική στο Vue.js με Composables

Κατά τον προγραμματισμό, είναι σημαντικό να δομείτε τη βάση κώδικα έτσι ώστε να επαναχρησιμοποιείτε τον κώδικα όπου είναι δυνατόν. Η αντιγραφή κώδικα μπορεί να διογκώσει τη βάση κώδικα και να περιπλέξει τον εντοπισμό σφαλμάτων, ειδικά σε μεγαλύτερες εφαρμογές.

Το Vue απλοποιεί την επαναχρησιμοποίηση κώδικα μέσω composables. Τα Composables είναι συναρτήσεις που ενσωματώνουν τη λογική και μπορείτε να τα χρησιμοποιήσετε ξανά σε όλο το έργο σας για να χειριστείτε παρόμοια λειτουργικότητα.

Ήταν πάντα Composables;

Πριν το Vue 3 εισαγάγει τα composables, θα μπορούσατε να χρησιμοποιήσετε mixins για να καταγράψετε κώδικα και να τον επαναχρησιμοποιήσετε σε διαφορετικά μέρη της εφαρμογής σας. Μείγματα που περιέχονται Επιλογές Vue.js, όπως δεδομένα, μέθοδοι και άγκιστρα κύκλου ζωής, επιτρέποντας την επαναχρησιμοποίηση κώδικα σε πολλά στοιχεία.

Για να δημιουργήσετε mixin, τα δομείτε σε ξεχωριστά αρχεία και στη συνέχεια τα εφαρμόζετε σε συστατικά προσθέτοντας το mixin στο

mixins ιδιοκτησία εντός του αντικειμένου επιλογών του στοιχείου. Για παράδειγμα:

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

Αυτό το απόσπασμα κώδικα δείχνει τα περιεχόμενα ενός mixin για την επικύρωση φορμών. Αυτό το mixin φιλοξενεί δύο ιδιότητες δεδομένων—φόρμαΔεδομένα και φόρμαΣφάλματα—αρχικά ορίστηκε σε κενές τιμές.

Το formData αποθηκεύει δεδομένα εισόδου για τη φόρμα, συμπεριλαμβανομένων των πεδίων ονόματος χρήστη και κωδικού πρόσβασης που αρχικοποιήθηκαν ως κενά. Το formErrors αντικατοπτρίζει αυτήν τη δομή για να διατηρεί πιθανά μηνύματα σφάλματος, επίσης αρχικά κενά.

Το mixin περιέχει επίσης μια μέθοδο, validateForm(), για να ελέγξετε ότι τα πεδία ονόματος χρήστη και κωδικού πρόσβασης δεν είναι άδεια. Εάν οποιοδήποτε πεδίο είναι κενό, συμπληρώνει την ιδιότητα δεδομένων formErrors με ένα κατάλληλο μήνυμα σφάλματος.

Η μέθοδος επιστρέφει αληθής για έγκυρη φόρμα, όταν το formErrors είναι κενό. Μπορείτε να χρησιμοποιήσετε το mixin εισάγοντάς το στο στοιχείο Vue και προσθέτοντάς το στην ιδιότητα mixin του αντικειμένου 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>

Αυτό το παράδειγμα δείχνει ένα στοιχείο Vue γραμμένο χρησιμοποιώντας την προσέγγιση αντικειμένου Επιλογές. ο mixins Η ιδιοκτησία περιλαμβάνει όλα τα mixins που έχετε εισαγάγει. Σε αυτήν την περίπτωση, το στοιχείο χρησιμοποιεί τη μέθοδο validateForm από το φόρμαΕπικύρωση mixin για να ενημερώσει τον χρήστη εάν η υποβολή της φόρμας ήταν επιτυχής.

Πώς να χρησιμοποιήσετε Composables

Το composable είναι ένα αυτόνομο αρχείο JavaScript με λειτουργίες προσαρμοσμένες σε συγκεκριμένες ανησυχίες ή απαιτήσεις. Μπορείτε να αξιοποιήσετε API σύνθεσης του Vue μέσα σε ένα composable, χρησιμοποιώντας χαρακτηριστικά όπως refs και υπολογισμένες refs.

Αυτή η πρόσβαση στο API σύνθεσης σάς επιτρέπει να δημιουργείτε λειτουργίες που ενσωματώνονται σε διάφορα στοιχεία. Αυτές οι συναρτήσεις επιστρέφουν ένα αντικείμενο, το οποίο μπορείτε εύκολα να εισαγάγετε και να ενσωματώσετε στα στοιχεία Vue μέσω της συνάρτησης εγκατάστασης του Composition API.

Δημιουργήστε ένα νέο αρχείο JavaScript στο έργο σας src κατάλογο για να χρησιμοποιήσετε ένα συνθετικό. Για μεγαλύτερα έργα, εξετάστε το ενδεχόμενο να οργανώσετε έναν φάκελο μέσα στο src και να δημιουργήσετε ξεχωριστά αρχεία JavaScript για διαφορετικά composables, διασφαλίζοντας ότι το όνομα κάθε composable αντανακλά τον σκοπό του.

Μέσα στο αρχείο JavaScript, ορίστε τη συνάρτηση που χρειάζεστε. Εδώ είναι μια αναδιάρθρωση του φόρμαΕπικύρωση mixin ως σύνθετο:

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

Αυτό το απόσπασμα ξεκινάει εισάγοντας την reactive συνάρτηση από το vue πακέτο. Στη συνέχεια δημιουργεί μια εξαγώγιμη συνάρτηση, useFormValidation().

Συνεχίζει δημιουργώντας μια αντιδραστική μεταβλητή, κατάσταση, το οποίο φιλοξενεί τις ιδιότητες formData και formErrors. Στη συνέχεια, το απόσπασμα χειρίζεται την επικύρωση της φόρμας με μια πολύ παρόμοια προσέγγιση με τη μίξη. Τέλος, επιστρέφει τη μεταβλητή κατάσταση και τη συνάρτηση validateForm ως αντικείμενο.

Μπορείτε να χρησιμοποιήσετε αυτό το συνθετικό από εισαγωγή της συνάρτησης JavaScript από το αρχείο στο συστατικό σας:

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

Μετά την εισαγωγή του useFormValidation composable, αυτός ο κώδικας καταστρέφει το αντικείμενο JavaScript επιστρέφει και συνεχίζει με την επικύρωση της φόρμας. Προειδοποιεί εάν η φόρμα που υποβλήθηκε είναι επιτυχής ή έχει σφάλματα.

Τα Composables είναι τα νέα μείγματα

Ενώ τα mixins ήταν χρήσιμα στο Vue 2 για επαναχρησιμοποίηση κώδικα, τα composable τα έχουν αντικαταστήσει στο Vue 3. Τα Composables παρέχουν μια πιο δομημένη και διατηρήσιμη προσέγγιση για την επαναχρησιμοποίηση της λογικής στις εφαρμογές Vue.js, καθιστώντας ευκολότερη τη δημιουργία επεκτάσιμων εφαρμογών ιστού με το Vue.