نحوه استفاده مجدد از منطق در Vue.js با Composables

Composables یک ارتقای ساده برای میکس‌ها هستند که باید فوراً با برنامه‌های Vue 3 خود استفاده کنید.

هنگام برنامه نویسی، مهم است که پایگاه کد خود را به گونه ای ساختار دهید که در صورت امکان از کد استفاده مجدد کنید. کپی کردن کد می تواند پایگاه کد را پر کند و اشکال زدایی را به خصوص در برنامه های بزرگتر پیچیده کند.

Vue استفاده مجدد از کد را از طریق composable ها ساده می کند. Composable ها توابعی هستند که منطق را در بر می گیرند و شما می توانید از آنها در سراسر پروژه خود برای مدیریت عملکردهای مشابه استفاده مجدد کنید.

آیا همیشه قابل ترکیب بود؟

قبل از اینکه Vue 3 Composables را معرفی کند، می‌توانید از mixins برای گرفتن کد و استفاده مجدد از آن در بخش‌های مختلف برنامه خود استفاده کنید. Mixins حاوی گزینه‌های Vue.js مانند داده‌ها، روش‌ها و قلاب‌های چرخه حیات بود که امکان استفاده مجدد از کد را در چندین مؤلفه فراهم می‌کرد.

برای ایجاد میکسین ها، آنها را در فایل های جداگانه ساختار می دهید و سپس با افزودن mixin به ویژگی mixins در شی گزینه های کامپوننت، آنها را روی کامپوننت ها اعمال می کنید. مثلا:

// formValidation.js
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 را برای اعتبارسنجی فرم ها نشان می دهد. این میکسین دارای دو ویژگی داده است – formData و formErrors – در ابتدا روی مقادیر خالی تنظیم شده است.

formData داده های ورودی فرم را ذخیره می کند، از جمله فیلدهای نام کاربری و رمز عبور که به صورت خالی مقداردهی شده اند. formErrors این ساختار را منعکس می کند تا پیام های خطای احتمالی را نیز در ابتدا خالی نگه دارد.

mixin همچنین حاوی متدی به نام validateForm() برای بررسی خالی نبودن فیلدهای نام کاربری و رمز عبور است. اگر هر یک از فیلدها خالی باشد، ویژگی داده formErrors را با یک پیام خطای مناسب پر می کند.

زمانی که formErrors خالی باشد، روش true را برای یک فرم معتبر برمی گرداند. می‌توانید با وارد کردن آن به کامپوننت Vue و افزودن آن به ویژگی mixin شی Options از mixin استفاده کنید:

<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 را نشان می دهد که با استفاده از رویکرد شیء Options نوشته شده است. ویژگی mixins شامل تمام میکس هایی است که شما وارد کرده اید. در این مورد، کامپوننت از روش validateForm از mixin formValidation استفاده می کند تا به کاربر اطلاع دهد که آیا ارسال فرم با موفقیت انجام شده است یا خیر.

نحوه استفاده از Composables

Composable یک فایل جاوا اسکریپت مستقل با توابع متناسب با نگرانی ها یا الزامات خاص است. می‌توانید با استفاده از ویژگی‌هایی مانند refs و refs محاسبه‌شده، از API ترکیبی Vue در یک Composable استفاده کنید.

این دسترسی به API ترکیبی به شما امکان می دهد توابعی ایجاد کنید که در اجزای مختلف ادغام شوند. این توابع یک شی را برمی‌گردانند که می‌توانید به راحتی آن را از طریق تابع راه‌اندازی Composition API وارد و در اجزای Vue وارد کنید.

یک فایل جاوا اسکریپت جدید در دایرکتوری src پروژه خود ایجاد کنید تا از یک composable استفاده کنید. برای پروژه‌های بزرگ‌تر، سازماندهی یک پوشه در src و ایجاد فایل‌های جاوا اسکریپت مجزا برای ترکیب‌پذیرهای مختلف را در نظر بگیرید، و مطمئن شوید که نام هر composable منعکس‌کننده هدف آن است.

در داخل فایل جاوا اسکریپت، تابع مورد نیاز خود را تعریف کنید. در اینجا یک بازسازی از میکسین formValidation به عنوان یک ترکیب پذیر است:

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

این قطعه با وارد کردن تابع واکنشی از بسته vue شروع می شود. سپس یک تابع قابل صادرات به نام useFormValidation() ایجاد می کند.

با ایجاد یک متغیر واکنشی، state، که خصوصیات formData و formErrors را در خود جای می دهد، ادامه می یابد. سپس قطعه اعتبار سنجی فرم را با رویکردی بسیار مشابه به mixin کنترل می کند. در نهایت، متغیر state و تابع validateForm را به عنوان یک شی برمی گرداند.

می‌توانید با وارد کردن تابع جاوا اسکریپت از فایل موجود در مؤلفه خود، از این composable استفاده کنید:

<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، این کد شی جاوا اسکریپت را که برمی گرداند تخریب می کند و اعتبارسنجی فرم را ادامه می دهد. این هشدار می دهد که آیا فرم ارسال شده موفق است یا دارای خطا است.

ترکیبات ترکیبی جدید هستند

در حالی که میکسین ها در Vue 2 برای استفاده مجدد از کد مفید بودند، composable ها جایگزین آنها در Vue 3 شده اند. Composable ها رویکردی ساختاریافته تر و قابل نگهداری برای استفاده مجدد از منطق در برنامه های Vue.js ارائه می دهند و ساخت برنامه های وب مقیاس پذیر با Vue را آسان تر می کنند.

منبع مقاله