vue项目中的字典问题

前言

我们在项目中经常会遇到一个字典问题，就是一个从后台获取的一个固定的数组，然后在系统中的很多地方都会通过select选择框用到。如果每次用的时候获取，就会经常出现两个问题：

1.这个数组数据量过大的时候，有可能点击select下拉框，数据还没有返回来，导致select无法选择；

2.每次都重新请求后台，当数据量过大，且同一页面其他接口也比较多时，导致页面加载缓慢。

那怎么解决呢？如下：

一、在utils中写一个dict.js的文件，内容如下：

//系统中封装好的axios
import { httpPost } from '@/utils/axios'
export function getDict(obj) {
	//这个dictList中的键名都是字典名称，即传入对应名称可获取对应list
    const dictList = {
        graduateSchool: [],
        major: [],
        topDegree: [],
        sex: [],
        title: [],
        workUnit: [],
        place: [],
        expertType: [],
    }
    for (let k in dictList) {
        httpPost('/sysdict/findByDictType', { dictType: `${k}` })
            .then((res) => {
                obj[k] = res.data
            })
    }
}

二、在main.js中引用刚才封装好的getDict方法，并对字典进行全局声明：

import { getDict } from "@/utils/dict.js"
Vue.prototype.$dictObject = {}
getDict(Vue.prototype.$dictObject)

三、之后我们就可以在系统中使用 “$dictObject.字典名” 来代替对应的list了：

 <el-form-item label="专业" prop="majorId">
               <el-select v-model="dataForm.majorId" placeholder="请选择专业">
                  <el-option
                    v-for="item in $dictObject.major"
                    :key="item.id"
                    :label="item.dictName"
                    :value="item.id">
                  </el-option>
                </el-select>
            </el-form-item>

总结

以上！完成——写博客是为了做笔记！！！