[vue 进阶] 关于dicts字典的用法

前言

在使用若依框架开发小项目的时候，发现在项目中频繁使用到字典，原本代码中的dicts没有深入研究，故自己写了一个混入来实现想要的字典获取功能。但是觉得每次切换页面都需要调用一下，而且每个系统都有一个mixins混入文件，感觉维护起来稍显繁琐。继而研究了一下dicts的用法，记录一下使用过程。

1.首先确定字典的接口，在若依框架中如下，具体可根据自己后端提供的字典接口进行修改

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return request({
    url: '/system/dict/data/type/' + dictType,
    method: 'get'
  })
}

此段代码在公共的api目录下

2.在公共的方法文件中提供一个方法

目录在 /src/utils/dict/DictData.js

/**
 * @classdesc 字典数据
 * @property {String} label 标签
 * @property {*} value 标签
 * @property {Object} raw 原始数据
 */
export default class DictData {
  constructor(label, value, raw) {
    this.label = label
    this.value = value
    this.raw = raw
  }
}

3.在组件库中添加该组件

目录/src/components/DictData/index.js

import Vue from 'vue'
import DataDict from '@/utils/dict'
import { getDicts as getDicts } from '@/api/system/dict/data'

function install() {
  Vue.use(DataDict, {
    metas: {
      '*': {
        labelField: 'dictLabel',
        valueField: 'dictValue',
        request(dictMeta) {
          return getDicts(dictMeta.type).then(res => res.data)
        },
      },
    },
  })
}

export default {
  install,
}

4.挂载

在main.js中

// 字典数据组件
import DictData from '@/components/DictData'
DictData.install()

5.使用

export default {
  name: "xxx",
  dicts: ['dict_xxx'],
 }

该字典在使用中作为select下拉内容，则使用dict.type.dict_xxx 作为调用。具体为嘛加上这个前缀还未弄清楚，待研究。