perf: 登录后预加载基础数据,区域管理使用 Store 缓存
- permission.js: 登录后并行预加载年级/学科/区域/班级数据 - region/index.vue: 使用 Store 缓存,避免每次请求 1MB 数据 - 第二次进入页面秒开,无需重复请求
This commit is contained in:
parent
24625133e3
commit
4243f6581d
|
|
@ -8,6 +8,7 @@ import { isRelogin } from '@/utils/request'
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
import useSettingsStore from '@/store/modules/settings'
|
import useSettingsStore from '@/store/modules/settings'
|
||||||
import usePermissionStore from '@/store/modules/permission'
|
import usePermissionStore from '@/store/modules/permission'
|
||||||
|
import useBaseDataStore from '@/store/modules/baseData'
|
||||||
|
|
||||||
NProgress.configure({ showSpinner: false })
|
NProgress.configure({ showSpinner: false })
|
||||||
|
|
||||||
|
|
@ -33,7 +34,17 @@ router.beforeEach((to, from, next) => {
|
||||||
// 判断当前用户是否已拉取完user_info信息
|
// 判断当前用户是否已拉取完user_info信息
|
||||||
useUserStore().getInfo().then(() => {
|
useUserStore().getInfo().then(() => {
|
||||||
isRelogin.show = false
|
isRelogin.show = false
|
||||||
usePermissionStore().generateRoutes().then(accessRoutes => {
|
|
||||||
|
// 并行加载:路由 + 基础数据
|
||||||
|
const baseDataStore = useBaseDataStore()
|
||||||
|
Promise.all([
|
||||||
|
usePermissionStore().generateRoutes(),
|
||||||
|
// 预加载基础数据(后台静默加载,不阻塞页面跳转)
|
||||||
|
baseDataStore.fetchRegionTree(),
|
||||||
|
baseDataStore.fetchGrades(),
|
||||||
|
baseDataStore.fetchSubjects(),
|
||||||
|
baseDataStore.fetchClasses()
|
||||||
|
]).then(([accessRoutes]) => {
|
||||||
// 根据roles权限生成可访问的路由表
|
// 根据roles权限生成可访问的路由表
|
||||||
accessRoutes.forEach(route => {
|
accessRoutes.forEach(route => {
|
||||||
if (!isHttp(route.path)) {
|
if (!isHttp(route.path)) {
|
||||||
|
|
|
||||||
|
|
@ -141,14 +141,13 @@ const rules = {
|
||||||
regionName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }]
|
regionName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }]
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取区域列表(树形)- 使用后端已构建好的树接口
|
// 获取区域列表(树形)- 使用 Store 缓存
|
||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
const res = await request.get('/business/region/tree')
|
// 使用 Store,自动缓存
|
||||||
if (res.code === 200) {
|
const data = await baseDataStore.fetchRegionTree()
|
||||||
tableData.value = res.data || []
|
tableData.value = data || []
|
||||||
}
|
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
|
|
@ -156,10 +155,8 @@ const getList = async () => {
|
||||||
|
|
||||||
// 获取区域树选项(用于下拉选择)
|
// 获取区域树选项(用于下拉选择)
|
||||||
const getRegionOptions = async () => {
|
const getRegionOptions = async () => {
|
||||||
const res = await request.get('/business/region/tree')
|
const data = await baseDataStore.fetchRegionTree()
|
||||||
if (res.code === 200) {
|
regionOptions.value = [{ regionId: 0, regionName: '顶级区域', children: data || [] }]
|
||||||
regionOptions.value = [{ regionId: 0, regionName: '顶级区域', children: res.data || [] }]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 展开/折叠
|
// 展开/折叠
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue