复用数据缓存

相关方法

说明

useReuseDataByTypes 用于获取并缓存业务字典、下拉选项等常用数据。

它基于 key 对数据进行全局缓存。当多个页面或组件需要相同的数据时，优先从缓存读取，避免重复请求。支持强制刷新缓存。

类型定义

interface ReuseDataType {
  key: string;
  method: (params: any) => Promise<any>;
  query?: any;
  forceRefresh?: boolean;
}

function useReuseDataByTypes(...args: ReuseDataType[]): ToRefs<Record<string, any[]>>;

参数说明

ReuseDataType

参数	类型	默认值	说明
key	string	-	数据的唯一标识键，用于缓存查找
method	Function	-	获取数据的 API 方法，需返回 Promise
query	any	-	(可选) 传递给 API 方法的查询参数
forceRefresh	boolean	false	(可选) 是否强制刷新缓存。为 true 时会重新请求接口并更新缓存

代码示例

基础用法

import { useReuseDataByTypes } from '@vue3-simple-bui/platform';
// 假设这是你的 API 方法
import { getDepartmentList, getRoleList } from '@/api/common';

// 批量获取并缓存数据
// 返回值是响应式的 Ref 对象，解构时保持响应性
const { deptList, roleList } = useReuseDataByTypes(
  {
    key: 'deptList', // 缓存 key
    method: getDepartmentList, // 接口方法
  },
  {
    key: 'roleList',
    method: getRoleList,
    query: { status: 1 }, // 接口参数
  },
);

// 在模板中直接使用
// <el-option v-for="item in deptList" :key="item.id" ... />

强制刷新

适用于数据更新频繁，或者需要确保获取最新数据的场景。

const { userTypes } = useReuseDataByTypes({
  key: 'userTypes',
  method: getUserTypes,
  forceRefresh: true, 
});