Vue JS Mixins

Vuejs Mixin nedir?

Mixinler genellikle kod tekrarlarından kaçınmamızı sağlayan esnek yapılardır. İçerisinde normal bir vue componentinin barındırdığı (data, method, computed prop…) gibi özellikleri barındırır. Mixinler genel olarak büyük çaplı projelerde daha çok tercih edilir çünkü proje büyüdükçe kod tekrarlarımız artmaya başlayacaktır.

Şimdi anlatmaya çalıştıklarımızı birde örneklendirelim.

Örneğimizde A ve B componentleri olup her ikisinde de butona tıklanınca ekrana merhaba uyarısı verdiğini düşünelim, bunun için normalde a componentinde ve b componentinde aynı işi yapan bir method tanımlayıp kullacaktık fakat mixinler ile bu gibi işlemlerin önüne geçeceğiz.

Proje Oluşturma

vue create mixin-app

Projeyi oluşturduktan sonra src/mixins/mixin.js isimli dosyamızı oluşturalım.

const testMixins= {
data(){
return {
 
 mesaj:"Merhaba"
}
},
methods:{
ekranamesajver(){
alert(this.mesaj)
}
}
}
export default testMixins

Şimdi sırada src/components/A.vue ve src/components/B.vue adında iki component tanımlayalım ve içerisine oluşturduğumuz mixin’i import edip kullanalım.

<template>
<div>
<button :onclick="ekranamesajver">Ekrana Mesaj Ver </button>
</div>
</template>
<script>
 import testMixins from '@/mixins/testMixins'
  export default {
   mixins: [testMixins], //birden fazla mixins import edilebilir.
   }
</script>

İmport ettiğimiz mixindeki bir fonksiyonu sanki componentin içerisindeki bir fonksiyonmuş gibi erişi aynı kullanım şekli ile tetikliyoruz.(Değişkenler içinde aynı şekilde) Daha sonra src/App.vue dosyamıza componentleri import edip her iki butonada basılıncada ekranda mesaj verildiğini göreceksiniz.

Herkese İyi Çalışmalar Dilerim. :)