vue2 混入 (mixin) 带来的小惊喜

最近在review自己写的代码时发现，在很多的地方都用了以下的代码块

async initCode() {
            const resSource = await this.$API.syscode.list.get({
                typeCode: "source",
                type: 3,
            });
            if (resSource.code == 200) {
                resSource.data.forEach((e) => {
                    this.sourceOptions.push({
                        label: e.name,
                        value: e.id,
                    });
                });
            }
            const resLevel = await this.$API.syscode.list.get({
                typeCode: "level",
                type: 3,
            });
            if (resLevel.code == 200) {
                resLevel.data.forEach((e) => {
                    this.levelOptions.push({
                        label: e.name,
                        value: e.id,
                    });
                });
            }
            const resIndustry = await this.$API.syscode.list.get({
                typeCode: "industry",
                type: 3,
            });
            if (resIndustry.code == 200) {
                resIndustry.data.forEach((e) => {
                    this.industryOptions.push({
                        label: e.name,
                        value: e.id,
                    });
                });
            }
            const resCity = await this.$API.syscity.list.get();
            let _tree = [];
            resCity.data.some((m) => {
                _tree.push({
                    id: m.id,
                    value: m.name,
                    label: m.name,
                    parentId: m.parentId,
                });
            });
            this.cityOptions = this.$TOOL.changeTree(_tree);
        },

其中主要是调用 await this.$API.syscode.list.get  api接口返回一组可用的数组数据，这种代码在项目存在很多所以想有没有办法优化一下。

于是在vue官方文档中找到了这个 混入 — Vue.js (vuejs.org)  

同时询问了chatgpt同样给出了相同解决方案，于是根据文档写一个了，并运行成，惊喜不错。

第一步：新建一个  mixin.js，写如下代码

export default {
    data() {
        return {};
    },
    methods: {
        async mixinCodeSelect(code, type) {
            const res = await this.$API.syscode.list.get({
                typeCode: code,
                type: type,
            });
            let arr = [];
            if (res.code == 200) {
                res.data.forEach((e) => {
                    arr.push({
                        label: e.name,
                        value: e.id,
                    });
                });
            }
            return arr;
        },
    },
};

该方法是返回一个基于下拉框的数据，调用 mixinCodeSelect 方法需要传入2个参数。

第二步：在vue页面中使用

引入  import mixin from '@/utils/mixin.js';

在methods中调用minxin里面的方法即可，如下：

mounted() {
		this.initCode();
	},
	methods: {
		async initCode() {
			this.typeIdOptions=await this.mixinCodeSelect('contract-type',3);
		},
}

　　

这样就简单很多了，代码看着也清爽了。