前端开发异步请求数据字典轻松调用
第一步:创建公共方法
首先创建公共调用数据字典方法
路径:src\utils\dictionary.js(个人习惯)
注意:后面会做更好的完善,现在先用着
// dictionary.js
/**
* 字典
* @param {*} that Vue对象
*/
export function dictionaries(that, key, code) {
let param = {
dictCode: code
};
// 实际使用
that.api_ifms.getDictList(param).then(res => {
if (res.code === 200) {
that[key] = res.data;
}
});
}
第二步:注册到vue全局使用
第二步就是在main.js里开始注册vue的自定义全局方法
路径:src\main.js
import { dictionaries } from "@/utils/dictionary.js";
Vue.prototype.dictionaries = dictionaries;
第三步:组件里调用
<template>
<div>
{{allotTypes}}
</div>
</template>
<script>
export default {
data() {
return {
allotTypes: [],
};
},
created() {
let that = this;
// 字典
this.dictionaries(that, 'allotTypes', 'WITHDRAWAL_STATUS')
},
methods: {
// 无须在这里创建请求字典数据的方法
},
}
};
</script>
<style lang="scss" scoped>
</style>