在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 对象中有相同的键。我正在尝试做一个 foreach 但也失败了

如果您没有双子属性，有人会尝试使用相同的键合并到 mixin / json 对象？

Answer 1

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

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

更新

回复YannickIngenierie回答并指出this article中的错误

1. 全局 Mixins 不是这样声明的

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

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

1. 本地 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 文件中