前端数据字典使用

现状

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

session.js 代码

1.  
   set() {
2.  
   return new Promise(async resolve => {
3.  
   let CONFIG = {};
4.  
   let session = sessionStorage.getItem('SCZS_DICTIONARY');
5.  
   if (session) {
6.  
   try {
7.  
   CONFIG = JSON.parse(session);
8.  
   } catch (e) {
9.  
   console.log('dictionary error');
10.  
    }
11.  
    }
12.  
    try {
13.  
    const { data, message } = await getDictList();
14.  
    if (!data) {
15.  
    console.log(message);
16.  
    } else {
17.  
    let rst = {};
18.  
    for (let item of data) {
19.  
    if (!rst[item.parentCode]) {
20.  
    rst[item.parentCode] = [];
21.  
    }
22.  
    rst[item.parentCode].push(item);
23.  
    }
24.  
    sessionStorage.setItem('SCZS_DICTIONARY', JSON.stringify(rst));
25.  
    CONFIG = rst;
26.  
    console.log('dictionary loaded');
27.  
    }
28.  
    // 格式化后存储
29.  
    } catch (e) { }
30.  
    this.data = CONFIG;
31.  
    resolve(true);
32.  
    });
33.  
    }

enum.js

1.  
   import { dictionary } from './session.js';
2.  
    
3.  
   // 线索价值
4.  
   export const clueValueEnum = function () {
5.  
   let data = dictionary.get('xsjz');
6.  
   return data;
7.  
   };

filter.js

1.  
   import {
2.  
   clueValueEnum,
3.  
   } from '@/dicts/enum';
4.  
    
5.  
   export function clueValueFilter(code) {
6.  
   let data = clueValueEnum().filter(x => {
7.  
   return x.itemCode == code;
8.  
   });
9.  
   if (data.length === 1) return data[0].itemName;
10.  
    else return '';
11.  
    }

缺点：

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

优化-按需查询

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

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

这篇好文章是转载于：学新通技术网