构造字典插件

当项目庞大时，我们不得不面临巨大的基础数据配置问题，无论写死还是单独调接口都不算最优选择，这个时候字典就诞生了。
字如其名，字典的作用就是根据一个key值去获取基础数据，就像小学生查字典一样简单

const install = function (Vue) {
	//全局汇入插入字典数据，这里会将页面的每个组件都插入该数据，当页面组件庞大时，会多次执行，待优化。
	Vue.mixin({
		data() {
			//this.$options可以获取data同级的自定义属性，比如我们使用的dict属性
			if (Array.isArray(this.$options.dicts) && this.$options.dicts.length > 0) {
				//若匹配到dict属性，并是数组且长度大于1，表示调用了字典插件, 加上对应方法。
				const dict = {
					getValue: this.getDictValue,
					getLabel: this.getDictLabel,
				}
				return {
					dict
				}
			}
			return {}
		},
		created() {
			if (Array.isArray(this.$options.dicts) && this.$options.dicts.length > 0) {
			//此处为获取字典的数据接口，这里很多人喜欢将获取字典数据个例化：每次获取一个字典，进行多次获取。我觉得综合下来一次批量获取获取更为优化。
				getDictName(this.$options.dicts).then(res => {
					//数据结构为 {dict1:[{value:'1', label: '类型1'}], dict2:[{value:'1', label: '类型1'}]
					Object.keys(res.data).forEach(key => {
						let value = res.data[key]
						//此处只能使用Vue.set进行属性设置
						Vue.set(this.dict, key, value)
					});
				})
			}
		},
		methods: {
			getDictValue(dictName, label) {
				let dictArr = this.dict[dictName]
				if (Array.isArray(dictArr) && dictArr.length > 0) {
					return dictArr.filter(item => item.label === label)[0].label
				} else {
					console.error('未匹配到对应字典的label值')
					return ''
				}
			},
			getDictLabel(dictName, value) {
				let dictArr = this.dict[dictName]
				if (Array.isArray(dictArr) && dictArr.length > 0) {
					return dictArr.filter(item => item.value === value)[0].value
				} else {
					console.error('未匹配到对应字典的value值')
					return ''
				}
			}
		}
	})
}
export default {
	install
}