时间戳

首页 > 解决方案 > 在vue中合并mixin

json - 在vue中合并mixin

问题描述

我正在使用 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 对象？

标签： jsonvue.jsmixins

解决方案

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

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

更新

回复YannickIngenierie回答并指出本文中的错误

  1. 全局 Mixins 不是这样声明的
// not global mixin; on contrary MyMixin is local
// and only available in one component.

new Vue({
  el: '#demo',
  mixins: [MyMixin]
});
  1. 本地 Mixins 不是这样声明的
// 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")
  }
});

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

推荐阅读