mixin konusun da bir çok tanımlamalar okudum genellikle alttaki gibi başlıklara denk geldim

• sass daki mixinler gibi (tuhaf bir yaklaşım)
• değişkenlerin global tanımlanması
• heryerden ulaşabileceğiniz methodlar oluşturmak.

evet bunlar aslında doğru yaklaşımlar ama mixin lar için sınırlayıcı bir düşünceye yol açtıklarıda malum.

Mixin lar bunlar ve daha fazlası için kullanılan bir özelliktir, yapıları componentler ile bire bir aynıdır. İçlerinde aynı componentler de olduğu gibi data, methods, computed gibi özellikleri aynı şekilde kullanıp hayat döngüleri(life cycles) de kullanabildiğiniz yegane bir araçtır.

Kullanımı ile ilgili örnek verecek olursam yukardaki üç madde de dahilinde, tüm componentlerinizin erişebileceği reactive değişlenler oluşturmak, yazdığınız uygulamanın akışını değiştirmek istediğinizde faydalanabileceğiniz methodları eklemek, en önemlisi componentler tarafından extend alınabiliyor olabilmesi extend dedim ama php deki trait gibi.

bir componentiniz var ve onun içerisinde bulunan özllikler ile aynı ama bazı methodlarının farklı sonuçları olması gerektiren başka bir componente ihtiyacınız var bu gibi durum da mixin lar çok kullanışlı olabilir.

genel kullanımda mixin lar src klasörünüzün içerisinde mixin isimli bir klasör içerisinde js uzantılı dosyalar halinde tutuluyor.

DateHelper isminde bir mixin oluşturuyorum, sonra bu mixini liste componentlerime extend alma ve daha sonra sisteme global olarak ekleme işlemi için kod örneği ekleyeceğim. ben her iki kullanım içinde örnek kod ekleyeceğim ama duruma göre globalmi eklenecek veya diğer componentlerinizin içerisindemi kullanacaksınız bu size kalmış yani her yazılan mixin illaki global eklenecek diye bir tanım yok.

Örnek mixin

const DateHelper = {
    data:function () {
        return {
            created_at:null,
            updated_at:null,
        }
    },
    computed:{
        getCreatedDate(){
            return this.dateFormat(this.created_at);
        },
        /* ... */
    },
    methods:{
        dateFormat(date, returnType='string'){
            /*...*/
        }
    }
}

örnek olarak bir blog sahibisiniz ve listelediğiniz yazılarınız LıstItem.vue isimli componentiniz tarafından render ediliyor bu durumda yukardaki mixin ı componentinize extend alacak olursak alttaki gibi bir kullanım yazılabilinir.

<template>
    <div class="list-item">
        <h2>{{ title }}</h2>
        <p>{{ description }}</p>
        <!-- extend aldığımız mixin içerisindeki computed kullanımı --->
        <p>Created date: {{ getCreatedDate }}</p> 
    </div>
</template>
<script>
    import DateHelper from "../mixins/DateHelper";
    export default {
        name: "ListItem",
        mixins: [DateHelper],
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        data(){
            return {
                /** other variables **/
            }
        },
        computed:{
            /** mixindaki kullanımını değiştirmek için aynı isimde üzerine yazıyoruz **/
            getCreatedDate(){
                        //mixin içerisindeki method
                return this.dateFormat(this.item.created_at); 
            },
        },
        methods:{
            /** other methods **/
        }
    }
</script>
<style lang="scss">
    .list-item{
        color:black;
    }
</style>

yukardaki örnekte şunu belirtmeliyim DateHelper içerisindeki değişkenler ve methodlar direk olarak kendi özellikleri gibi kullanılır. global olarak eklense idi farklı $root şeklinde erişmemiz gerekecekti.

ilk önce global ekleme işleminin nasıl olduğunu belirteyim. src klasörümüzde main.js isimli dosyamıza ekleme yapacağız

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import {Auth} from "./mixins/DateHelper";
/** diğer mixinları da ekleyebilirsiniz**/

Vue.config.productionTip = false;

window.App = new Vue({
  store,
  mixins:[DateHelper], //array olduğu için oluşturduğunuz tüm mixinları burdan ekleyebilirsiniz
  render: h => h(App)
}).$mount('#app');

yukardaki kodda DateHelper mixinımızı global olarak eklemiş olduk. globak eklenen mixinlar componentimizin bir parçası değildir ve computed davranışları kendilerine özgü olacağı için direk içerisindeki methodu kullanacağız.

<template>
    <div class="list-item">
        <h2>{{ title }}</h2>
        <p>{{ description }}</p>
        <!-- global mixin içerisindeki dateFormat methodu kullanımı --->
        <p>Created date: {{ $root.dateFormat(item.created_at) }}</p> 
    </div>
</template>
<script>
    export default {
        name: "ListItem",
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        methods:{
            /** other methods **/
        },
    }
</script>
<style lang="scss">
    .list-item{
        color:black;
    }
</style>

son olarak şunlarıda belirtmek istiyorum global değişken veya methodlar için genelde vuex öneriliyor, sebebini pek araştırmadım ama bunun bana göre nedenlerinden biri mixin lar küçük projeler için çok kullanışlı ve esnek, büyük projeler de muhtemelen kod karmaşıklılığına sebep olabiliyor. Burda seçiminizi yapmanız gerekebilir

örnekler basitti ama anlatımım için aynısını söyleyemem, bunun için üzgünüm yılda bir belki yazıyorum zaman sorunu hepimizde var.