جلسه بیست و پنجم آموزش فریم ورک vue.js : آموزش Mixins در vue.js

آموزش Mixins در vue.js

در جلسه قبلی از آموزش vue.js، به آموزش فیلترها پرداختیم ، حال در این جلسه به آموزش Mixins در vue.js می پردازیم.

Mixins چیست؟

روشی انعطاف پذیر در جهت توزیع قابلیتهای استفاده مجدد برای اجزاء vue.js می باشد.

یک شی mixin میتواند شامل گزینه های مختلفی باشد.

mixins به شکل آرایه تعریف می شوند.

همیشه استفاده از فیلترها کار خوبی نیست و گاهی performance پروژه را پایین می آورد، این زمانی است که ما بخواهیم یک فیلتر یکسان را در صفحات مختلف استفاده کنیم؛

در اینجاست که مشکل کد تکراری بوجود می آید.

در Mixins، کد را یکجا مینویسیم و در جاهای مختلف از آن استفاده میکنیم.

 

نحوه ایجاد Mixins:

  • داخل پوشه Components، یک پوشه می سازیم بنام Mixins
  • داخل این پوشه یک فایل js مثلا بنام  exampleMixin.js ایجاد میکنیم.
  • کد زیر را داخل آن مینویسیم:
 export const exampleMixin = {
      created() {
        console.log('Hello from the mixin!')
      }
    }
  • حال در فایل برای مثال Example.vue به روش زیر از آن استفاده میکنیم:
 <script>
    import { exampleMixin } from '../mixins/exampleMixin.js'
      export default {
        mixins: [exampleMixin]
      }
    </script>

مثال 2 –
1- داخل پوشه Components، یک پوشه می سازیم بنام Mixins
2- داخل این پوشه یک فایل js مثلا بنام NamesMixin.js ایجاد میکنیم.
3- کدی که داخل کامپوننت هامون در جلسه قبل نوشته بودیم را داخل این فایل js قرار میدهیم.

 

NamesMixin.js

export const NameMixin = {
  data() {
    return {
      names: ["mohammad", "milad", "iman", "elnaz", "reza", "shirin"],
      filterText: ""
    };
  },
  computed: {
    filteredNames() {
      return this.names.filter(element => {
        return element.match(this.filterText);
      });
    }
  },
};

4- علاوه بر app.vue یک کامپوننت دیگر هم میسازیم به نام list.vue که تست کنیم که میتوانیم از mixins ای که ایجاد کردیم در کامپوننت های مختلف استفاده کنیم.

List.vue

<template>
  <div class="row">
    <div class="clearfix"></div>
    <hr>
    <div class="form-group">
      <label>filter names :</label>
      <input type="text" class="form-control" v-model="filterText">
    </div>
    <ul>
      <li v-for="name in filteredNames" :key="name">{{ name }}</li>
    </ul>
  </div>
</template>

<script>
import { NameMixin } from "../Mixins/NamesMixin.js";
export default {
  mixins: [NameMixin],
};
</script>

5- داخل app.vue به شکل زیر فقط از mixins استفاده میکنیم و البته کامپوننتی را هم که ایجاد کردیم ، صدا میکنیم و استفاده می نماییم.

<template>
  <div class="container">
    <div class="row">
      <div class="clearfix"></div>
      <hr>
      <div class="form-group">
        <label>filter names :</label>
        <input type="text" class="form-control" v-model="filterText">
      </div>
      <ul>
        <li v-for="name in filteredNames" :key="name">{{ name }}</li>
      </ul>
    </div>
    <app-list></app-list>
  </div>
</template>

<script>
import List from "./Components/List";
import { NameMixin } from "./Mixins/NamesMixin.js";
export default {
  
  components: {
    "app-list": List
  },
  mixins: [NameMixin]
};
</script>

مبینیم که با import کردن mixins داخل دو فایل کامپوننت، تنها با استفاده کرد از آن، کد در هر دو کامپوننت بدون کد تکراری اجرا می شود.

import { NameMixin } from "./Mixins/NamesMixin.js";
  mixins: [NameMixin]

بنابراین میتوانیم کل کدهایی که قرار است در کل پروژه استفاده شوند را در این فایل js مربوط به mixns قرار دهیم و ازشون استفاده کنیم.

ترتیب اجرای کدها در Mixins و کامپوننت ها:

نکته : ترتیب اجرای کدها به چه صورت است؟

اول کدهای مربوط به کامپوننت اجرا میشود یا Mixins، یا نهایتا کدام کدها، اون یکی را override میکند؟

Mixins الویت دارد، اول آن اجرا میشود بعد آنچه در کامپوننت هست اجرا میشود

و در نهایت خروجی آن چیزی خواهد بود که در کامپوننت نوشته شده است.

این موارد را با logگرفتن در فایل js مربوط به Mixins و log گرفتن در فایل مربوط به کامپوننت List.vue میتونیم متوجه شویم، در خروجی اول log مربوط به mixins را در کنسول می بینیم بعد log مربوط به List.

NamesMixin.js

export const NameMixin = {
  data() {
    return {
      names: ["mohammad", "milad", "iman", "elnaz", "reza", "shirin"],
      filterText: ""
    };
  },
  computed: {
    filteredNames() {
      return this.names.filter(element => {
        return element.match(this.filterText);
      });
    }
  },
  created() {
    console.log('log in mixin.js');
  }
};

List.vue
<script>
import { NameMixin } from "../Mixins/NamesMixin.js";
export default {
  mixins: [NameMixin],
  created() {
    console.log("log in list component");
  }
};
</script>

این مطلب را در مثال زیر هم مشاهده میکنید:

var mixin = {
    created: function () {
        console.log('mixin hook called')
    }
}

new Vue({
    mixins: [mixin],
    created: function () {
        console.log('component hook called')
    }
})

// => "mixin hook called"
// => "component hook called"

البته data مشترک override و data ی غیر مشترک merge میشود.

مثل مثال زیر:

var mixin = {
    data: function () {
        return {
            message: 'hello',
            foo: 'abc'
        }
    }
}

new Vue({
    mixins: [mixin],
    data: function () {
        return {
            message: 'goodbye',
            bar: 'def'
        }
    },
    created: function () {
        console.log(this.$data)
        // => { message: "goodbye", foo: "abc", bar: "def" }
    }
})

و در مثال دیگری به شکل زیر میتوانید این قضیه را مشاهده کنید

var mixin = {
    methods: {
        foo: function () {
            console.log('foo')
        },
        conflicting: function () {
            console.log('from mixin')
        }
    }
}

var vm = new Vue({
    mixins: [mixin],
    methods: {
        bar: function () {
            console.log('bar')
        },
        conflicting: function () {
            console.log('from self')
        }
    }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

پس کل data داخل یک آرایه تلفیق می شود.

Mixins ها data اشون را share نمیکنند، فقط از data اصلی استفاده میکنند.

Mixins را میتوانیم به صورت public هم اجرا کنیم.

یعنی کدی که داخل js مربوط به mixins نوشتیم را داخل main.js به صورت زیر تعریف کنیم:

Vue.mixin({
  created() {
    console.log('log in main.js -global');
  }
});

نکته : اگر mixins ای global تعریف شود، این mixins به ازای تک تک کامپوننت ها و instance هایی که از vue ساخته میشود، میاد و عملیات درون خود را اجرا میکند.
البته ازین روش به ندرت و معمولا در پلاگین ها استفاده میشود ؛ چون گاهی باعث confilict میشود، در پروژه های بزرگ در همان js استفاده میشود.

برچسب‌ها:

با کامنت گذاری ما را در ارائه آموزش بهتر یاری کنید

026-32601 داخلی 4

info@pinsite.ir

ثبت سفارش طراحی سایت

برای دریافت تخفیف، در هنگام تماس، نحوه آشنایی با شرکت را از طریق سایت pinsite.ir اعلام کنید