在 vue 中合并 mixin

Question

我正在 vue/quasar 应用程序中工作。我的 view.cshtml

中有这样的 mixin

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

我想在 js 文件中合并我的内容（这是为了将相同的操作集中在多个 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) {
       
        }
    }
}

};

我想将这 2 个 miwin 合二为一。但是当我尝试 assign 或 var mixin = { ...mixin1, ...nomeMixins }; 我只有 mixin1 没有关于方法，来自我的 js 文件 nomeMixins 的数据但是合并失败因为我在我的 json object 中有相同的密钥。我正在尝试制作 foreach 但也失败了

有人试图合并到 mixin / json object 如果你没有双 child 属性 ?

Answer 1

你不能以那种方式合并 mixins。传播语法将覆盖键，例如 data、computed、methods 等，最终结果将不适合您的目的。

参考 documentation 在您的组件中添加 mixins。另请注意，您可以轻松地在任何组件中添加多个混入，因此我认为两个混入的组合没有任何用处。

更新

回复YannickIngenierie回答并指出this article

中的错误

全局 Mixin 不是这样声明的

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

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

本地 Mixin 不是这样声明的

// 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")
  }
});

要点是在阅读包括我在内的随机人员撰写的任何文章之前，先参考文档。稍微比较一下他在文档中所说的内容。

Answer 2

经过工作和搜索...我发现 this one 并且明白我可以在我的组件中直接添加 mixin（不要笑我几个月前就在求 vue）

我的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);
        })
    },      
}

});

然后在我的 compoment.js 中添加这个

 mixins: [DataLoader],

我将我所有的 js 文件都包含在我的 cshtml 文件中

在 vue 中合并 mixin

Merge mixin in vue

json

mixins

vue.js

更新