VUE.JS

Vue.js Mixins

Güncelleme:
Vue Mixin’leri, Vue component’ler için tekrar kullanılabilir işlemler oluşturmanın esnek bir biçimi olarak ifade ediliriz. Bir mixin object, herhangi bir component option’ı barındırabilir. Bir component ...
GÖRSEL
Vue Mixin’leri, Vue component’ler için tekrar kullanılabilir işlemler oluşturmanın esnek bir biçimi olarak ifade ediliriz. Bir mixin object, herhangi bir component option’ı barındırabilir. 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.Vue.js MixinsGiriş 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!');
    }
  }
}
 
var app = new Vue({
  el: '#app',
  mixins: [newMixin],
  created() {
    this.hello();
  }
});
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>
      `
    })
 
    var app = new Vue({
      el: "#app",
      data: {
 
      },
    });
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;
    var mixin = {
      created: function () {
        console.log('Mixin hook called!');
      }
    }
 
    var app = new Vue({
      mixins: [mixin],
      created: function () {
        console.log('Component hook called!');
      },
      data: {
 
      }
    })
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 () {
    var anOption = this.$options.anOption
    if (anOption) {
      console.log(anOption)
    }
  }
})
 
var app = new Vue({
  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.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.