[JavaScript知识库]Vue2中混入（mixins）的实战应用

混入的官方定义： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

那也就是说，你可以单独写个逻辑文件，默认导出一个对象，对象里面可以包含data、created、mounted、methods 等vue模板文件中的逻辑对象。接着可以将这个对象引入到多个vue模板中进行功能复用，从而达到功能模块的逻辑封装，便于使用及后期维护。

这里我举一些日常开发中最常用的示例来说，更多的是 methods 的混入。

一、后端返回数据与字典数据之前的转换

通常情况下，像状态、类型、性质等属性，后端存储数据通过数字来进行存储，这些数字会有数据字典与之对应。那么在获取后端数据时，我们前端人员拿到的数据正是这些数字以及字典数据。在多个页面进行展示时，难道要在每个页面中写一个转换的方法吗？当然不是，这时候我们就可以使用混入来轻松解决这一问题。

数据转换的混入：

dataTrans.js
传入一个字典列表，传入一个数字状态。在字典数组中进行查找对应的文字说明。

export default {
    methods: {
        transDict(list, status) {
        // 这里使用 try--catch 是防止有的时候后端返回的数据中式null或空的情况，也就是说此条数据无状态，我们只需要在catch中返回 --- 或者 无状态 等字眼即可
            try {
                return list.find(item => item.dictValue == status).dictLabel
            } catch (error) {
                return '---'
            }
        }
    }
}

使用：

<template>
	<div>
		<el-table>
			<!-- 方式一 -->
			<el-table-column label="状态" prop="status" align="center" width="60" :formatter="e => transDict(status_list, e.status)" show-overflow-tooltip />
			<!-- 方式二 -->
			<el-table-column label="性质" prop="customerType">
                <template slot-scope="{ row }">{{ transDict(nature, row.customerType) }}</template>
            </el-table-column>
		</el-table>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import dataTrans from '@/mixins/dataTrans';
export default {
	name: 'Index',
	mixins: [dataTrans],
	computed: {
		...mapGetters(['status_list', 'nature'])
	}
}
</script>

二、文件下载的混入

当我们遇到文件下载的需求时，请求接口后端返回的数据流，前端需要再写逻辑进行下载。这个时候当然也是可以通过写一个混入方法来做通用方法。
tools.js 混入

export default {
    methods: {
    // 可传入字节流及想要的文件名。甚至可以传入文件后缀，进行多种文件类型下载，这里默认的是下载Excel表格
        filesExport(res, title) {
            if(res != null) {
                res.download = `${title}.xlsx`
                let url = window.URL.createObjectURL(new Blob([res]))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.download = `${title}.xlsx`
                link.type = 'xls'
                document.body.appendChild(link)
                link.click()
            }else {
            	// 自定义的弹窗提示
                this.$commonJS.openNotify('导出失败', 'error')
            }
        }
    },
}

使用：

<script>

import tools from '@/mixins/tools';
export default {
	name: 'Index',
	mixins: [tools],
	methods: {
		exportSheet() {
			let title = ''
			this.$commonJS.showLoading('正在导出')
			exportInvoiceApply(id).then((res) => {
                this.$commonJS.hideLoading()
                // 直接通过 this 调用 混入中的方法，传入 字节流 及标题
                this.filesExport(res, title)
            }).catch(() => {
                this.$commonJS.hideLoading()
            });
		}
	}
}
</script>

三、Element表格最后一行合计数据的混入

是的，这个合计当然也可以用混入，因为自定义的合计方法逻辑也是比较多的。
getSummaries.js 混入

export default {
    methods: {
    // params是el-table表格合计事件的默认参数，里面包含表格中每一列的属性和数据 
    // prop 是自定义的传入的一个数组，意思是需要计算哪个属性的合计
    // title 是合计列 第一格的文字描述
        getSummariesMixins(params,prop,title) {
            const { columns, data } = params
            const sums = []
            columns.forEach((column, index) => {
                if(index === 0) {
                    sums[index] = title
                    return;
                }
                if(prop.includes(column.property)) {
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = 'N/A';
                    } 
                }
            })
            return sums;
        }
    }
}

使用：

<template>
	<div>
		<el-table
             :data="dataList"
             border
             show-summary
             :summary-method="getSummaries"
             style="margin-top: 20px"
            >  
                <el-table-column type="index" width="55"/>
                <el-table-column label="名称" prop="goodsName" show-overflow-tooltip/>
                <el-table-column label="型号" prop="goodsModel" show-overflow-tooltip/>
                <el-table-column label="单位" prop="unit" show-overflow-tooltip>
                    <template slot-scope="{row}">{{ row.unit || row.goodsUnit }}</template>
                </el-table-column>
                <el-table-column label="数量" prop="number" show-overflow-tooltip>
                    <template slot-scope="{row, $index}">
                        <el-input v-model="row.number" @input="changeNumber($event, $index)" size="mini" type="number"/>
                    </template>
                </el-table-column>
                <el-table-column label="单价（含税）" prop="unitPrice" show-overflow-tooltip/>
                <el-table-column label="金额（含税）" prop="amount" show-overflow-tooltip />
                <el-table-column label="操作" align="center" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button @click="deleteItems(scope)" type="text" style="color: #F56C6C;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
	</div>
</template>

<script>
import getSummaries from '@/mixins/getSummaries';
export default {
	name: 'Index',
	mixins: [getSummaries],
	methods: {
		getSummaries(params) {
		// ['number', 'amount'] 是表格中的 prop 属性，需要对哪个属性进行合计 就写进数组里即可。
            return this.getSummariesMixins(params, ['number', 'amount'], '合计')
        }
	}
}
</script>

除以上三种用法之外，还有很多其它用法，例如 审批功能 的实现，还需要在混入中写入 data 函数，来保存需要审批项的id和类型等字段。

好多种用法在混入中可以灵活使用，需要学会变通。