前端开发异步请求数据字典轻松调用

第一步：创建公共方法

首先创建公共调用数据字典方法
路径：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>