Composables הם שדרוג פשוט למיקסים שעליך להתחיל להשתמש בו עם יישומי Vue 3 שלך מיד.

בעת התכנות, חשוב לבנות את בסיס הקוד שלך כך שתעשה שימוש חוזר בקוד במידת האפשר. שכפול קוד יכול לנפח את בסיס הקוד ולסבך איתור באגים, במיוחד באפליקציות גדולות יותר.

Vue מפשט את השימוש החוזר בקוד באמצעות חומרים קומפוזיציונים. רכיבים קומפוזיציים הם פונקציות שכוללות היגיון, ואתה יכול לעשות בהן שימוש חוזר בכל הפרויקט שלך כדי לטפל בפונקציונליות דומה.

האם זה תמיד היה חומרי חיבור?

לפני ש-Vue 3 הציג רכיבים קומפוזיציים, אתה יכול להשתמש במיקסינים כדי ללכוד קוד ולהשתמש בו מחדש בחלקים שונים של היישום שלך. מיקסינים הכילו אפשרויות Vue.js כגון נתונים, שיטות והוקסים של מחזור חיים, המאפשר שימוש חוזר בקוד על פני מספר רכיבים.

כדי ליצור מיקסים, אתה בונה אותם בקבצים נפרדים ואז מיישם אותם על רכיבים על ידי הוספת המיקסין ל- מיקסינים מאפיין בתוך אובייקט האפשרויות של הרכיב. לדוגמה:

// formValidation.js
exportconst formValidationMixin = {
 data() {
return {
 formData: {
 username: '',
 password: '',
 },
 formErrors: {
 username: '',
 password: '',
 },





instagram viewer



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

קטע קוד זה מציג את התוכן של מיקסין לאימות טפסים. המיקסין הזה מכיל שני מאפייני נתונים-טופס מידע ו formErrors- מוגדר בהתחלה לערכים ריקים.

formData מאחסן נתוני קלט עבור הטופס, לרבות שדות שם משתמש וסיסמה המאוחלים כריקים. formErrors משקף את המבנה הזה כדי להחזיק הודעות שגיאה פוטנציאליות, גם ריקות בתחילה.

המיקסין מכיל גם שיטה, 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 שנכתב באמצעות גישת האובייקט Options. ה מיקסינים המאפיין כולל את כל המיקסים שייבאת. במקרה זה, הרכיב משתמש בשיטת validateForm מ- FormValidation mixin כדי ליידע את המשתמש אם שליחת הטופס הצליחה.

כיצד להשתמש בחומרים קומפוזיציים

קובץ חיבור הוא קובץ JavaScript עצמאי עם פונקציות המותאמות לדאגות או דרישות ספציפיות. אתה יכול למנף ממשק ה-API של Vue בתוך רכיב חיבור, תוך שימוש בתכונות כמו refs ו-reps מחושבים.

גישה זו לממשק ה-API מאפשרת ליצור פונקציות המשתלבות ברכיבים שונים. פונקציות אלה מחזירות אובייקט, שתוכל לייבא ולשלב בקלות ברכיבי Vue באמצעות פונקציית ההגדרה של ה-Composition API.

צור קובץ JavaScript חדש בפרויקט שלך src ספרייה כדי להשתמש ב-composable. עבור פרויקטים גדולים יותר, שקול לארגן תיקיה בתוך src וליצור קובצי JavaScript נפרדים עבור רכיבי חיבור שונים, וודא ששם כל רכיב רכיב משקף את מטרתו.

בתוך קובץ ה-JavaScript, הגדר את הפונקציה הדרושה לך. הנה ארגון מחדש של FormValidation מיקסין כחומר מורכב:

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

קטע זה מתחיל בייבוא ​​הפונקציה הריאקטיבית מה- 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 הוא חוזר וממשיך עם אימות הטופס. הוא מתריע אם הטופס שנשלח הצליח או שיש לו שגיאות.

חומרי חיבור הם המיקסינים החדשים

בעוד שמיקסים היו שימושיים ב-Vue 2 לשימוש חוזר בקוד, רכיבי חיבור החליפו אותם ב-Vue 3. Composables מספקים גישה מובנית יותר וניתנת לתחזוקה לשימוש חוזר בלוגיקה ביישומי Vue.js, מה שמקל על בניית אפליקציות אינטרנט ניתנות להרחבה עם Vue.