vue项目中字典如何使用（其中一种解决方案）

整体思想：

1、新建一个文件（此处是dict.js），一般是在mixin里面，将所有的字典项以数组的形式声明好

2、在create中判断字典值是否存在于state中，若不存在，则全量引入（保存在store中）

具体实施：

　　1、在dict.js中判断到字典项不存在时，将所有的字典项逗号分隔形成一个字符串（codes）传给store的action

　　　　1.1、在store的字典项模块中定义一个action，该action方法调用接口获取所有字典值，将字典项设置入state中

　  　　  1.2、（接口的定义：传入多个字典项的值，逗号分隔，返回数据是各个字典项的值）

　　　　1.3、遍历返回的值，调用mutation方法，将多个字典值以对象的形式存入state中，属性名是字典项的值，属性值是一个数组，数组里面是该字典项的所有字典值对象

　　2、在需要用到字典的地方，引入mapGetters，调用对应GET方法即可使用

// 文件路径 src/mixins/dict.js

import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
　　　　// 所有的字典项
      dictList: [
        'comm.yesOrNo',
        'comm.hasOrNot',
        'comm.gender',
      ]
    };
  },
  computed: {
    ...mapGetters('dict', ['GET_VIEWS_DICLIST'])
  },
  async created() {
    if (this.GET_VIEWS_DICLIST['comm.yesOrNo'] === undefined) {
      this.SET_VIEWS_DICLIST_ACTIONS({
        codes: this.dictList.join(',')
      });
    }
  },
  methods: {
    ...mapActions('dict', ['SET_VIEWS_DICLIST_ACTIONS']),
　　 // 该方法根据字典值获取字典名称
　　 // val 字典值，例如： 1
　　 // list  该字典类型的所有字典项 
　　 getLabelName(val, list) {

      const len = list?.length;

      for (let i = 0; i < len; i++) {

        if (list[i].code === String(val)) {

          return list[i].name;

        }

      }

      return '';

    },

  }
};

 

字典相关的状态管理模块

// 文件位置 src/store/modules/dict.js

// 接口引入
import { getViewsDict } from '@/api/base/common';
const getDefaultState = () => {
  return {
    dicList: {} // 业务字典
  };
};
const dict= {
  namespaced: true,
  state: getDefaultState(),
  getters: {
    GET_VIEWS_DICLIST: (state) => state.dicList
  },
  actions: {
    SET_VIEWS_DICLIST_ACTIONS({ commit }, codes) {
      return new Promise((resolve, reject) => {
        getViewsDict(codes)
          .then((res) => {
            const obj = {};
            res?.data?.forEach((item) => {
              obj[item.code] = item?.items?.map((val) => {
                return {
                  code: String(val.code),
                  name: val.name
                };
              });
            });
            commit('SET_VIEWS_DICLIST', obj);
            resolve(obj);
          })
          .catch(() => {
            reject();
          });
      });
    }
  },
  mutations: {
    SET_VIEWS_DICLIST: (state, data) => {
      state.dicList = Object.assign({}, state.dicList, data);
    }
  }
};
export default dict;

 

获取字典值的接口

// 文件位置  src/api/base/common.js

import request from '@/api/axios.interceptors';
const viewApi = process.env.VUE_APP_VIEWS_API;

// 获取业务字典
export function getViewsDict(params) {
  return request({
    url: `${viewApi}/dictionary`,
    method: 'get',
    params
  });
}

 

字典值的使用，使用之前记得引入src/mixins/dict.js内容

<el-form-item class="form-item" label="户籍类型" prop="residentType">
    <el-select
      v-model="formData_base.residentType"
      placeholder="请选择"
      @change="changeResidentType"
    >
      <el-option
        v-for="item in GET_VIEWS_DICLIST['comm.registerType.resident']"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
</el-form-item>