前端数据字典使用

现状

在登录后一次性拉取所有的字典数据,存储到session中,通过filter去读取所需的字典值

session.js 代码

set() {return new Promise(async resolve => {let CONFIG = {};let session = sessionStorage.getItem('SCZS_DICTIONARY');if (session) {try {CONFIG = JSON.parse(session);} catch (e) {console.log('dictionary error');}}try {const { data, message } = await getDictList();if (!data) {console.log(message);} else {let rst = {};for (let item of data) {if (!rst[item.parentCode]) {rst[item.parentCode] = [];}rst[item.parentCode].push(item);}sessionStorage.setItem('SCZS_DICTIONARY', JSON.stringify(rst));CONFIG = rst;console.log('dictionary loaded');}// 格式化后存储} catch (e) { }this.data = CONFIG;resolve(true);});}

enum.js

import { dictionary } from './session.js';// 线索价值
export const clueValueEnum = function () {let data = dictionary.get('xsjz');return data;
};

filter.js

import {clueValueEnum,
} from '@/dicts/enum';export function clueValueFilter(code) {let data = clueValueEnum().filter(x => {return x.itemCode == code;});if (data.length === 1) return data[0].itemName;else return '';
}

缺点:

若存在较大的数据量,一次性加载会导致接口读取时间过长,若是小项目可以使用该方法,大项目且并发高的项目不推荐此种方法

优化-按需查询

在需要使用数据字典时,进行单个查询后存储至session中,后续直接通过session中的数据进行使用

高并发和数据量大时也不会出现加载过慢的情况。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部