在 vue 中合并 mixin

编程问答 2022-05-29

问题描述

我在 vue/quasar 应用程序中工作。 我的 view.cshtml 中有这样的 mixin

import sys

from PyQt5.QtCore import QDir
from PyQt5.QtWidgets import (
    QApplication,QFileSystemModel,qstyledItemDelegate,QTreeView,)


class StyledItemDelegate(qstyledItemDelegate):
    def initStyleOption(self,option,index):
        super().initStyleOption(option,index)
        if index.column() != 0:
            return
        model = index.model()
        if model.hasChildren(index):
            if model.canFetchMore(index):
                model.fetchMore(index)
            option.text += " ({})".format(model.rowCount(index))


if __name__ == "__main__":
    app = QApplication.instance()
    if app is None:
        app = QApplication(sys.argv)

    view = QTreeView()
    view.resize(640,480)
    view.show()

    model = QFileSystemModel()
    model.setRootPath(QDir.currentPath())

    view.setModel(model)
    view.setRootIndex(model.index(QDir.currentPath()))

    delegate = StyledItemDelegate(view)
    view.setItemDelegate(delegate)

    sys.exit(app.exec_())

并且我想与我在 js 文件中的内容合并（这是为了集中多个 cshtml 中的相同操作）

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

};

我想将这两个 miwin 合二为一。但是当我尝试分配或 var mixin = { ...mixin1,...nomeMixins }; 我只有 mixin1 没有关于方法，来自我的 js 文件 nomeMixins 的数据但合并失败，因为我的 json 对象中有相同的键。我正在尝试进行 foreach 但也失败了

在没有双子属性的情况下，有人尝试合并到具有相同键的 mixin/json 对象？

解决方法

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

参考 documentation 在你的组件中添加 mixin。另请注意，您可以轻松地在任何组件中添加多个 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")
  }
});

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

,

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

我的 custommiwin.js

  var dataTable = ((DataView)dataGridViewWebFields.DataSource).Table;
            var dataGridRow = dataGridViewWebFields.Rows.Cast<DataGridViewRow>().FirstOrDefault(r => r.Cells[0].Value.Equals(fieldName));
            if (dataGridRow != null && dataGridRow.Index != newIndex)
            {
                var dataTableRow = GetWebFieldFromDataGridViewRow(dataGridRow);
                var dataViewRow = dataGridViewWebFields.Rows[newIndex];
                dataViewRow.DefaultCellStyle = dataGridRow.DefaultCellStyle;
                var newRow = dataTable.NewRow();
                newRow.ItemArray = dataTableRow.ItemArray;
                dataTable.Rows.Remove(dataTableRow);
                dataTableRow.Index = newIndex;
                dataTable.Rows.InsertAt(newRow,newIndex);
                //dataTable.AcceptChanges(); 
                dataGridViewWebFields.DataSource = dataTable.AsDataView();

});

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

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

jsonmixinsmixinsvue.js