ویوو جی‌اس از راه بهتر - Mixin به زبان ساده

سلام دوستان. توی هر برنامه‌ای عملکردها (توابع، متغیرها و ...) و ویژگی‌هایی وجود داره که قسمت‌های زیادی وابسته به اونها هستن و ازشون استفاده می‌کنن. مثلا یک متد پرکاربرد به اسم clone داریم که معمولا توی همه جای برنامه استفاده میشه. اگه بخوایم توی چندین کامپوننت از این متد استفاده کنیم، در حالت عادی باید اون رو توی همه‌ی کامپوننت‌ها تکرار کنیم چون کامپوننت‌ها به اجزای هم‌دیگه دسترسی ندارن:

Vue.component('umbrella', {
  methods: {
    clone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
});

Vue.component('carpet', {
  methods: {
    clone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
});

همونطور که می‌بینیم مجبور شدیم متد clone رو توی هر دو کامپوننت بطور دقیق تکرار کنیم که این اصلا جالب نیست به ۳ دلیل:

1. کدهای تکراری داریم می‌نویسیم
2. حجم کد بالا میره
3. برای تغییر دادن متد باید هر جایی که تکرار شده رو تغییر بدیم

یک راه بهتر اینه که ویژگی‌های پرکاربرد رو فقط یک جا تعریف کنیم به طوری که بصورت عمومی همه جا در دسترس باشن. این کار توی ویوو با Mixins انجام میشه که امروز اونها رو بررسی می‌کنیم.

 

تعریف کردن Mixin

یک میکسین یک آبجکت ساده هست که اعضای اون دقیقا همون چیزهایی هست که می‌تونیم توی یک کامپوننت تعریف کنیم. مثلا data، methods و ....

ما می‌خوایم متد clone رو بصورت عمومی در دسترس قرار بدیم. ابتدا یک فایل درست می‌کنیم به اسم mixins.js و توی اون یک آبجکت بصورت زیر export می‌کنیم:

export default {
  methods: {
    clone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
}

خب نوشتن میکسین به همین راحتی بود 😎

حالا باید به کامپوننت‌هایی که اون رو لازم دارن، میکسین رو شناسایی کنیم. برای این کار توی تعریف کامپوننت یک پراپرتی درست می‌کنیم به اسم mixins که یک آرایه هست. توی این آرایه می‌تونیم چندین میکسین اضافه کنیم:

import myMixin from './mixins';

Vue.component('umbrella', {
  mixins: [ myMixin ],
  // ...
});

مرحله شناسایی هم تموم شد. حالا متد clone توی هر کامپوننتی که از اون میکسین استفاده می‌کنه در دسترس هست. روش دسترسی به اعضای میکسین مثل دسترسی به بقیه اعضای کامپوننت هست. حالا می‌تونیم به متد clone خیلی راحت با this دسترسی داشته باشیم:

Vue.component('umbrella', {
  mixins: [ myMixin ],
  data() {
    user: {}
  }
  mounted() {
    const user = this.clone(this.user);
    // ...
  },
  computed: {
    user() {
      return this.clone(this.user);
    }
  }
});