چرا سکان آکادمی؟
Mixinها  در Vue.js

Mixinها در Vue.js

Mixin ها قطعه کدهایی هستند که می توانند در تمامی کامپوننت های Vue.js استفاده شوند. به این دلیل استفاده می شوند که از تکرار شدن توابع و کدها در کامپوننت ها جلوگیری شود. Mixin ها object هایی هستند که یک بار تعریف می شوند ولی می توان بارها و بارها از آن ها در کل پروژه استفاده کرد. یک Mixin می تواند تمامی property های یک کامپوننت را دارا باشد. تمامی ویژگی های یک کامپوننت که از یک Mixin استفاده می کند، با تمامی ویژگی هایی که در Mixin استفاده شده است، هماهنگ است.

مثالی در رابطه با استفاده از Mixin در یک کامپوننت را با هم بررسی می کنیم:

<html lang="en">
<head>
    <title> Mixin </title>
</head>
<body>
<div id="app">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    // define a mixin object
    const myMixin = {
        created: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log('hello from mixin!')
            }
        }
    }

    // define a component that uses this mixin
    const Component = Vue.extend({
        mixins: [myMixin]
    })

    const component = new Component() // => "hello from mixin!"

</script>
</body>
</html>

انواع Mixin ها:

دو نوع از Mixin ها را می توان در Vuejs تعریف و استفاده کرد:

  1. Local Mixin:

این همان نوعی است که در مثال بالا با هم بررسی کردیم. این نوع از Mixin به ماژولی که اضافه شده و در آن استفاده شده، محدود می شود. توانایی استفاده از Mixin های محلی (local)، تنها در کامپوننتی که آن Mixin اضافه شده است، امکان پذیر خواهد بود. این نوع از Mixin زمانی کاربرد دارد که بخواهیم تنها در یک کامپوننت بارها و بارها از آن Mixin استفاده کنیم.

  1. Global Mixin:

این نوع از Mixin نمونه اصلاح شده از نوع اول می باشد که به صورت عمومی و در فایل Main.js هر پروژه ای تعریف می شود. چون این Mixin به صورت عمومی تعریف شده و در تمامی کامپوننت های Vue.js تاثیر گذار است، باید با احتیاط خاصی از این نوع استفاده کرد.

نحوه تعریف کردن این نوع از Mixin مشابه زیر است:

Vue.mixin({
    created: function () {
        const myOption = this.$options.myOption
        if (myOption) {
            console.log(myOption)
        }
    }
})
new Vue({
    myOption: 'hello!'
})

// => "hello!"

چرا واقعا ما نیازمند استفاده از Mixin ها هستیم؟

  1. اول اینکه Mixin ها به سادگی، تمیزی و بهینه بودن کدها پایبند هستند و درضمن این اطمینان را می دهند که در کدها تکرار به وجود نمی آید.
  2. با کمک Mixin ها می توان انعطاف پذیری بیشتری در کدها به وجود آورد.
  3. همچنین Mixin ها ایمن هستند و اگر خوب نوشته شده باشند، خارج از محدوده تعریف شده خودشان تغییراتی به وجود نمی آورند.
  4. به راحتی استفاده ی چندین باره از کدها را فراهم می کنند.

مثالی دیگر:

<html lang="en">
<head>
    <title> Mixin </title>
</head>
<body>
<div id="app">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods : {
        },
    });
    const myMixin = {
        created: function () {
            this.startmixin()
        },
        methods: {
            startmixin: function () {
                alert("Mixin Popup!");
            }
        }
    };
    const Component = Vue.extend({
        mixins: [myMixin]
    })
    const component = new Component();
</script>
</body>
</html>

منبع: 

  https://www.mygreatlearning.com/blog/26176-2

دوره در حال تکمیل است ... rocket