Vue.js Mixins

Bir component mixin kullandığında mixin içerisindeki tüm option’lar (data, method, computed prop…) component’in kendi option’ları içerisinde “mixed” olarak yer alır. Konuyu metinler ve örnekler üzerinden anlatmaya başlamadan önce, aşağıda yer alan ve benim de kaynaklardan biri olarak değerlendirdiğim Vue Mastery > Next-Level Vue¹ bölümünü izlemenizi önereceğim.

Giriş bölümündeki anlatımı özetlemek gerekirse, birden fazla component’in ortak özellikler paylaştığı durumları ele alalım. DRY (Don’t Repeat Yourself) prensibi üzerinden -eğer zorunluluk değilse- değerlendirildiğinde bu ortak özelliklerin paylaşılabilir / tekrar kullanılabilir ve geliştirilebilir bir şekilde kullanılması hem yalınlık hem de işlevsellik için bir gereklilik olacaktır. Elbette Vue bu süreci prensipten ziyade fonksiyonellik çerçevesinde ele almakta. DRY benim kişisel olarak atıfta bulunduğum bir not sadece. Devam edecek olursak, bu paylaşılan özellikleri ayrı ayrı tanımlamak yerine gerektiği durumda erişilebilir olarak bulundurmak daha faydalı olacaktır. Mixin’ler de tam olarak bu göreve sahipler. Hemen bir örnek ile konuyu pekiştirelim.

<div id="app"></div>

const newMixin = {
  methods: {
    hello() {
      alert('Hello World!');
    }
  }
}

// Vue v2.x
const app = new Vue({
  el: '#app',
  mixins: [newMixin],
  created() {
    this.hello();
  }
});

// Vue v3.x
const app = Vue.createApp({
  mixins: [newMixin],
  created() {
    this.hello();
  }
}).mount('#app');

Yukarıdaki basit uygulamada, instance oluşturulduğunda (created()² ³) bir alert işlemi gerçekleştirilecektir. Instance içerisinde işlenen method mixin aracılığıyla newMixin içeriğinden sağlanmaktadır. Şimdi, örneğimizi biraz daha geliştirelim:

  <section id="app" class="section" v-cloak>
    <div class="container">
      <component is="notification">Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
        Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
        Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
      </component>

      <component is="warning">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </component>
    </div>
  </section>

Yukarıda yer alan örnekte notification ve warning adında component’ler ve visible adında bir method tanımlı. Benzer bir component oluşturmak istediğimizde, en temel haliyle bu yapının tekrarlanmamasını istediğimizi varsayalım ve buna uygun olarak bir mixin oluşturalım ve ortak alanları bu mixin içerisinde barındıralım.

    const newMixin = {
      data() {
        return {
          show: true,
        }
      },
      methods: {
        hide() {
          if (this.show == true) {
            this.show = false;
            console.log('hidden!')
          }
        }
      }
    }

    Vue.component('notification', {
      mixins: [newMixin],
      data() {
        return {}
      },
      template: `
      <div class="notification" v-if="show">
        <button class="delete" v-on:click="hide()"></button>
        <slot></slot>
      </div>
      `
    });

    Vue.component('warning', {
      mixins: [newMixin],
      data() {
        return {}
      },
      template: `
      <div class="notification is-primary" v-if="show">
        <button class="delete" v-on:click="hide()"></button>
        <slot></slot>
      </div>
      `
    })

    // Vue v2.x
    const app = new Vue({
      el: "#app",
      data: {
        //...
      },
    });

    // Vue v3.x
    const app = Vue.createApp({
      data() {
        return {
          //...
        }
      }
    }).mount('#app');

Benzer bir isimler component’in kendi içerisinde de method ya da data vb. tanımladığımızı varsayalım! Bu durumda, component’in kendi method’u işleme alınacaktır. Fakat, hook function kullanımında mixin hook component’te tanımlı olandan önce işlenecektir. Örneğin;

   const mixin = {
      created: function () {
        console.log('Mixin hook called!');
      }
    }

    // Vue v2.x
    const app = new Vue({
      mixins: [mixin],
      created: function () {
        console.log('Component hook called!');
      },
      data: {
        //...
      }
    });

    // Vue v3.x
    const app = Vue.createApp({
      mixins: [mixin],
      created: function () {
        console.log('Component hook called!');
      },
      data: {
        //...
      }
    }).mount('#app');

Unutmadan ekleyeyim, bir mixin global olarak da uygulanabilir. Ancak, bir mixin global olarak uygulandığında sonrasında oluşturulan tüm instance’lar bu durumdan etkileneceklerdir.

Vue.mixin({
  created: function () {
    const anOption = this.$options.anOption
    if (anOption) {
      console.log(anOption)
    }
  }
})

// Vue v2.x
const app = new Vue({
  anOption: 'Hello World!'
});

// Vue v3.x
const app = Vue.createApp({
  anOption: 'Hello World!'
});

Sonuç Olarak

Mixin ile ilgili bahsedeceğim genel özellikler bu kadar. Birkaç ek detay daha mevcut. Bu başlıklar için Vue.js > Mixins⁴ ⁵ yazısına göz atabilirsiniz.