refactor: 重构字典store

This commit is contained in:
dap
2024-09-12 16:06:11 +08:00
parent d5b37bd03e
commit 6b9c048d13
2 changed files with 15 additions and 10 deletions

View File

@@ -29,6 +29,16 @@ export const useDictStore = defineStore('app-dict', () => {
* select radio radioButton使用 只能为固定格式(Option) * select radio radioButton使用 只能为固定格式(Option)
*/ */
const dictOptionsMap = reactive(new Map<string, Option[]>()); const dictOptionsMap = reactive(new Map<string, Option[]>());
/**
* 添加一个字典请求状态的缓存
*
* 主要解决多次请求重复api的问题(不能用abortController 会导致除了第一个其他的获取的全为空)
* 比如在一个页面 index表单 modal drawer总共会请求三次 但是获取的都是一样的数据
* 相当于加锁 保证只有第一次请求的结果能拿到
*/
const dictRequestCache = reactive(
new Map<string, Promise<DictData[] | void>>(),
);
function getDict(dictName: string): DictData[] { function getDict(dictName: string): DictData[] {
if (!dictName) return []; if (!dictName) return [];
@@ -53,6 +63,7 @@ export const useDictStore = defineStore('app-dict', () => {
} }
function resetCache() { function resetCache() {
dictRequestCache.clear();
dictMap.clear(); dictMap.clear();
dictOptionsMap.clear(); dictOptionsMap.clear();
} }
@@ -90,6 +101,7 @@ export const useDictStore = defineStore('app-dict', () => {
$reset, $reset,
dictMap, dictMap,
dictOptionsMap, dictOptionsMap,
dictRequestCache,
getDict, getDict,
getDictOptions, getDictOptions,
resetCache, resetCache,

View File

@@ -2,17 +2,10 @@ import type { DictData } from '#/api/system/dict/dict-data-model';
import { dictDataInfo } from '#/api/system/dict/dict-data'; import { dictDataInfo } from '#/api/system/dict/dict-data';
import { type Option, useDictStore } from '#/store/dict'; import { type Option, useDictStore } from '#/store/dict';
// todo 重复代码的封装
/**
* 添加一个字典请求状态的缓存
*
* 主要解决多次请求重复api的问题(不能用abortController 会导致除了第一个其他的获取的全为空)
* 比如在一个页面 index表单 modal drawer总共会请求三次 但是获取的都是一样的数据
*/
const dictRequestCache = new Map<string, Promise<DictData[] | void>>();
// todo 重复代码的封装
export function getDict(dictName: string): DictData[] { export function getDict(dictName: string): DictData[] {
const { getDict, setDictInfo } = useDictStore(); const { dictRequestCache, getDict, setDictInfo } = useDictStore();
// 这里拿到 // 这里拿到
const dictList = getDict(dictName); const dictList = getDict(dictName);
// 检查请求状态缓存 // 检查请求状态缓存
@@ -32,7 +25,7 @@ export function getDict(dictName: string): DictData[] {
} }
export function getDictOptions(dictName: string): Option[] { export function getDictOptions(dictName: string): Option[] {
const { getDictOptions, setDictInfo } = useDictStore(); const { dictRequestCache, getDictOptions, setDictInfo } = useDictStore();
const dictOptionList = getDictOptions(dictName); const dictOptionList = getDictOptions(dictName);
// 检查请求状态缓存 // 检查请求状态缓存
if (dictOptionList.length === 0 && !dictRequestCache.has(dictName)) { if (dictOptionList.length === 0 && !dictRequestCache.has(dictName)) {