Vben Admin 多標簽頁狀態(tài)管理源碼學習
引言
本文將對 Vue-Vben-Admin 的狀態(tài)管理實現(xiàn)源碼進行分析解讀,耐心讀完,相信您一定會有所收獲!
multipleTab.ts 系統(tǒng)鎖屏
文件 src\store\modules\multipleTab.ts
聲明導出一個store實例 useMultipleTabStore
、一個方法 useMultipleTabWithOutStore()
用于沒有使用 setup
組件時使用。
// 多標簽頁信息存儲 export const useMultipleTabStore = defineStore({ id: 'app-multiple-tab', state: { /*...*/ }, getters: { /*...*/ } actions:{ /*...*/ } }); export function useMultipleTabWithOutStore() { return useMultipleTabStore(store); }
State/Getter
狀態(tài)對象定義了標簽頁路由列表、緩存標簽頁名稱以及最后一次拖動標簽的索引。同時提供了對應方法用于獲取該狀態(tài)值。
// 多標簽頁狀態(tài) export interface MultipleTabState { cacheTabList: Set<string>; // 緩存標簽頁路由名稱 // 標簽頁路由列表 RouteLocationNormalized 路由記錄的標準化版本 tabList: RouteLocationNormalized[]; lastDragEndIndex: number; // 最后一次拖動標簽的索引 } state: (): MultipleTabState => ({ cacheTabList: new Set(), tabList: cacheTab ? Persistent.getLocal(MULTIPLE_TABS_KEY) || [] : [], // 優(yōu)先加載緩存/本地存儲內(nèi)容 lastDragEndIndex: 0, }), getters: { // 獲取標簽頁路由列表 getTabList(): RouteLocationNormalized[] { return this.tabList; }, // 獲取緩存標簽頁路由名稱列表 getCachedTabList(): string[] { return Array.from(this.cacheTabList); }, // 獲取最后一次拖動標簽的索引 getLastDragEndIndex(): number { return this.lastDragEndIndex; }, },
Actions
方法 addTab
方法用于打開標簽頁。
- 判斷當前打開是否特殊頁面(錯誤處理/登錄/重定向)。
- 若存在已經(jīng)打開路徑相同的標tianj簽頁,更新其標簽頁路由記錄,否則添加新頁面路由記錄。
- 更新需要緩存的標簽頁路由名稱,使用本地存儲持久化。
// 打開標簽頁 async addTab(route: RouteLocationNormalized) { // 路由基本屬性 const { path, name, fullPath, params, query, meta } = getRawRoute(route); // 錯誤處理頁面 登錄 重定向 等頁面 if ( path === PageEnum.ERROR_PAGE || path === PageEnum.BASE_LOGIN || !name || [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string) ) { return; } let updateIndex = -1; // 標簽頁已經(jīng)存在,不在重復添加標簽 const tabHasExits = this.tabList.some((tab, index) => { updateIndex = index; return (tab.fullPath || tab.path) === (fullPath || path); }); // 標簽已經(jīng)存在,執(zhí)行更新操作 if (tabHasExits) { const curTab = toRaw(this.tabList)[updateIndex]; // 獲取當前標簽頁路由記錄 if (!curTab) { return; } curTab.params = params || curTab.params; // 從 path 中提取的已解碼參數(shù)字典 curTab.query = query || curTab.query; // 從 URL 的 search 部分提取的已解碼查詢參數(shù)的字典。 curTab.fullPath = fullPath || curTab.fullPath; // URL 編碼與路由地址有關。包括 path、 query 和 hash。 this.tabList.splice(updateIndex, 1, curTab); // 替換原有的標簽頁路由記錄 } else { // 添加標簽頁 // 獲取動態(tài)路由打開數(shù),超過 0 即代表需要控制打開數(shù) const dynamicLevel = meta?.dynamicLevel ?? -1; if (dynamicLevel > 0) { // 如果設置大于 0 了,那么就要限制該路由的打開數(shù)限制了 // 首先獲取到真實的路由,使用配置方式減少計算開銷. // const realName: string = path.match(/(\S*)\//)![1]; const realPath = meta?.realPath ?? ''; // 獲取到已經(jīng)打開的動態(tài)路由數(shù), 判斷是否大于某一個值 if ( this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath).length >= dynamicLevel ) { // 關閉第一個 const index = this.tabList.findIndex((item) => item.meta.realPath === realPath); index !== -1 && this.tabList.splice(index, 1); } } this.tabList.push(route); // 添加至路由列表中 } this.updateCacheTab(); // 使用本地存儲持久化 cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList); },
方法updateCacheTab
用于更新需要緩存的標簽頁路由名稱,返回一個 Set 集合。若路由中meta
中設置ignoreKeepAlive
為 true
,該標簽頁不會被緩存。
// 根據(jù)當前打開的標簽更新緩存 async updateCacheTab() { // Set 集合存儲 const cacheMap: Set<string> = new Set(); for (const tab of this.tabList) { const item = getRawRoute(tab); // 若忽略KeepAlive緩存 不緩存 const needCache = !item.meta?.ignoreKeepAlive; if (!needCache) { continue; } const name = item.name as string; cacheMap.add(name); } this.cacheTabList = cacheMap; // 存儲路由記錄名稱的 Set 集合 },
方法setTabTitle
使用meta
屬性,將最新標題內(nèi)容附加到路由上。
// 設置標簽標題 async setTabTitle(title: string, route: RouteLocationNormalized) { const findTab = this.getTabList.find((item) => item === route); if (findTab) { findTab.meta.title = title; // meta實現(xiàn) 設置每個頁面的title標題 await this.updateCacheTab(); } },
在標簽頁組件中,根據(jù)傳入打開頁面路由記錄tabItem
,標簽頁標題名稱綁定計算屬性 getTitle
。
// src\layouts\default\tabs\components\TabContent.vue <template> <Dropdown :dropMenuList="getDropMenuList" :trigger="getTrigger" @menu-event="handleMenuEvent"> <div :class="`${prefixCls}__info`" @contextmenu="handleContext" v-if="getIsTabs"> <span class="ml-1">{{ getTitle }}</span> </div> </Dropdown> </template> props: { tabItem: { type: Object as PropType<RouteLocationNormalized>, default: null, }, isExtra: Boolean, }, // 獲取標題信息 const getTitle = computed(() => { const { tabItem: { meta } = {} } = props; return meta && t(meta.title as string); });
以上就是Vben Admin 多標簽頁狀態(tài)管理源碼學習的詳細內(nèi)容,更多關于Vben Admin 多標簽頁狀態(tài)管理的資料請關注腳本之家其它相關文章!
相關文章
Vue實現(xiàn)動態(tài)顯示textarea剩余字數(shù)
這篇文章主要為大家詳細介紹了Vue實現(xiàn)動態(tài)顯示textarea剩余文字數(shù)量,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05