Merge mixin in vue

Question

I'm working in vue/quasar application. I've my mixin like this in my view.cshtml

var mixin1 = {
        data: function () {
            return { data1:0,data2:'' }
        }
        ,
        beforeCreate: async function () {
            ...}
        },
        methods: {
            addformulaire(url) {
               
            },
            Kilometrique() {  }
          
        }
    }

And I want merge with my content in js file (it's to centralize same action an severals cshtml)

const nomeMixins = {
data: function () {
    return { loadingcdt: false, lstclt: [], filterclient: [], loadingdoc: false, lstdoc: [], filterdoc: [] }
},
computed: {
    libmntpiece(v) { return "toto"; }
},
methods: {
    
    findinfcomplemtX3(cdecltx3, cdedocx3) {
        
    },
    preremplissagex3: async function (cdecltx3, cdedocx3) {
       
        }
    }
}

};

I want merge this 2 miwin in one. But when I try assign or var mixin = { ...mixin1, ...nomeMixins }; I've only mixin1 nothing about methods,data from my js file nomeMixins but merging failed cause I've same key in my json object. I'm trying to make a foreach but failed too

Someone try to merge to mixin / json object with same key in the case you've no double child property ?

score 1 · Answer 1 · edited Jul 16 '22 at 01:22

You cant merge mixins in that way. the spread syntax will overwrite keys e.g data, computed, methods etc and final result will not be suitable for your purpose.

refer documentation for adding mixins in your component. Also note that You can easily add multiple mixins in any component, so I don't think combination of two mixins will be any useful.

UPDATE

reply to YannickIngenierie answer and pointing out mistakes in this article

Global Mixins are not declared like this

// not global mixin; on contrary MyMixin is local
// and only available in one component.

new Vue({
  el: '#demo',
  mixins: [MyMixin]
});

Local Mixins are not declared like this

// NOT local mixin; on contrary its global Mixin
// and available to all components

const DataLoader = Vue.mixin({....}}

Vue.component("article-card", {
  mixins: [DataLoader], // no need of this
  template: "#article-card-template",
  created() {
    this.load("https://jsonplaceholder.typicode.com/posts/1")
  }
});

Point is refer documentation first before reading any article written by some random guy, including me. Do slight comparison what he is saying whats in documentation.

score 0 · Accepted Answer · answered Jan 21 '21 at 12:34

After working and searching... I find this one And understand that I can add directly mixin in my compoment (don't laught I'm begging with vue few months ago)

my custommiwin.js

const DataLoader = Vue.mixin({
data: function () {
    return { loadingcdt: false, lstclt: [], filterclient: [], loadingdoc: false, lstdoc: [], filterdoc: [] }
},
methods: {
    filterClt: async function (val, update, abort) {
        if (val.length < 3) { abort(); return; }
        else {//recherche
            this.loadingcdt = true;
            let res = await axios...
            this.loadingcdt = false;
        }
        update(() => {
            const needle = val.toLowerCase();
            this.filterclient = this.lstclt.filter(v => v.libelle.toLowerCase().indexOf(needle) > -1 || v.id.toLowerCase().indexOf(needle) > -1);
        })
    },
    filterDocument: async function (val, update, abort, cdecltx3) {
        if (!cdecltx3 || val.length < 3) { abort(); return; }
        else {//recherche
            this.loadingdoc = true;
            let res = await axios({ ...) }
            this.loadingdoc = false;
        }
        update(() => {
            const needle = val.toLowerCase();
            this.filterdoc = this.lstdoc.filter(v => v.id.toLowerCase().indexOf(needle) > -1);
        })
    },      
}

});

and in my compoment.js I add this

 mixins: [DataLoader],

I include all my js file in my cshtml file

the article is plain wrong; I wonder how your problem gets solved. Please refer my updated answer. — Ashwin Bande, Jan 21 '21 at 14:35
Plain wrong, I'm not qualify for say that, but it's just show me how add mixin in a compoment. I use it in 2 compoments, like I write and it's works very well. But thanks for advertise it's always to notice them. — YannickIngenierie, Jan 21 '21 at 20:28

Merge mixin in vue

2 Answers2

UPDATE