Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)
引言
本文將對(duì) Vue-Vben-Admin 的狀態(tài)管理實(shí)現(xiàn)源碼進(jìn)行分析解讀,耐心讀完,相信您一定會(huì)有所收獲!
multipleTab.ts 系統(tǒng)鎖屏
文件 src\store\modules\multipleTab.ts
聲明導(dǎo)出一個(gè)store實(shí)例 useMultipleTabStore
、一個(gè)方法 useMultipleTabWithOutStore()
用于沒(méi)有使用 setup
組件時(shí)使用。
// 多標(biāo)簽頁(yè)信息存儲(chǔ) export const useMultipleTabStore = defineStore({ id: 'app-multiple-tab', state: { /*...*/ }, getters: { /*...*/ } actions:{ /*...*/ } }); export function useMultipleTabWithOutStore() { return useMultipleTabStore(store); }
State/Getter
狀態(tài)對(duì)象定義了標(biāo)簽頁(yè)路由列表、緩存標(biāo)簽頁(yè)名稱以及最后一次拖動(dòng)標(biāo)簽的索引。同時(shí)提供了對(duì)應(yīng)方法用于獲取該狀態(tài)值。
// 多標(biāo)簽頁(yè)狀態(tài) export interface MultipleTabState { cacheTabList: Set<string>; // 緩存標(biāo)簽頁(yè)路由名稱 // 標(biāo)簽頁(yè)路由列表 RouteLocationNormalized 路由記錄的標(biāo)準(zhǔn)化版本 tabList: RouteLocationNormalized[]; lastDragEndIndex: number; // 最后一次拖動(dòng)標(biāo)簽的索引 } state: (): MultipleTabState => ({ cacheTabList: new Set(), tabList: cacheTab ? Persistent.getLocal(MULTIPLE_TABS_KEY) || [] : [], // 優(yōu)先加載緩存/本地存儲(chǔ)內(nèi)容 lastDragEndIndex: 0, }), getters: { // 獲取標(biāo)簽頁(yè)路由列表 getTabList(): RouteLocationNormalized[] { return this.tabList; }, // 獲取緩存標(biāo)簽頁(yè)路由名稱列表 getCachedTabList(): string[] { return Array.from(this.cacheTabList); }, // 獲取最后一次拖動(dòng)標(biāo)簽的索引 getLastDragEndIndex(): number { return this.lastDragEndIndex; }, },
Actions
方法 addTab
方法用于打開(kāi)標(biāo)簽頁(yè)。
- 判斷當(dāng)前打開(kāi)是否特殊頁(yè)面(錯(cuò)誤處理/登錄/重定向)。
- 若存在已經(jīng)打開(kāi)路徑相同的標(biāo)tianj簽頁(yè),更新其標(biāo)簽頁(yè)路由記錄,否則添加新頁(yè)面路由記錄。
- 更新需要緩存的標(biāo)簽頁(yè)路由名稱,使用本地存儲(chǔ)持久化。
// 打開(kāi)標(biāo)簽頁(yè) async addTab(route: RouteLocationNormalized) { // 路由基本屬性 const { path, name, fullPath, params, query, meta } = getRawRoute(route); // 錯(cuò)誤處理頁(yè)面 登錄 重定向 等頁(yè)面 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; // 標(biāo)簽頁(yè)已經(jīng)存在,不在重復(fù)添加標(biāo)簽 const tabHasExits = this.tabList.some((tab, index) => { updateIndex = index; return (tab.fullPath || tab.path) === (fullPath || path); }); // 標(biāo)簽已經(jīng)存在,執(zhí)行更新操作 if (tabHasExits) { const curTab = toRaw(this.tabList)[updateIndex]; // 獲取當(dāng)前標(biāo)簽頁(yè)路由記錄 if (!curTab) { return; } curTab.params = params || curTab.params; // 從 path 中提取的已解碼參數(shù)字典 curTab.query = query || curTab.query; // 從 URL 的 search 部分提取的已解碼查詢參數(shù)的字典。 curTab.fullPath = fullPath || curTab.fullPath; // URL 編碼與路由地址有關(guān)。包括 path、 query 和 hash。 this.tabList.splice(updateIndex, 1, curTab); // 替換原有的標(biāo)簽頁(yè)路由記錄 } else { // 添加標(biāo)簽頁(yè) // 獲取動(dòng)態(tài)路由打開(kāi)數(shù),超過(guò) 0 即代表需要控制打開(kāi)數(shù) const dynamicLevel = meta?.dynamicLevel ?? -1; if (dynamicLevel > 0) { // 如果設(shè)置大于 0 了,那么就要限制該路由的打開(kāi)數(shù)限制了 // 首先獲取到真實(shí)的路由,使用配置方式減少計(jì)算開(kāi)銷(xiāo). // const realName: string = path.match(/(\S*)\//)![1]; const realPath = meta?.realPath ?? ''; // 獲取到已經(jīng)打開(kāi)的動(dòng)態(tài)路由數(shù), 判斷是否大于某一個(gè)值 if ( this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath).length >= dynamicLevel ) { // 關(guān)閉第一個(gè) const index = this.tabList.findIndex((item) => item.meta.realPath === realPath); index !== -1 && this.tabList.splice(index, 1); } } this.tabList.push(route); // 添加至路由列表中 } this.updateCacheTab(); // 使用本地存儲(chǔ)持久化 cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList); },
方法updateCacheTab
用于更新需要緩存的標(biāo)簽頁(yè)路由名稱,返回一個(gè) Set 集合。若路由中meta
中設(shè)置ignoreKeepAlive
為 true
,該標(biāo)簽頁(yè)不會(huì)被緩存。
// 根據(jù)當(dāng)前打開(kāi)的標(biāo)簽更新緩存 async updateCacheTab() { // Set 集合存儲(chǔ) 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; // 存儲(chǔ)路由記錄名稱的 Set 集合 },
方法setTabTitle
使用meta
屬性,將最新標(biāo)題內(nèi)容附加到路由上。
// 設(shè)置標(biāo)簽標(biāo)題 async setTabTitle(title: string, route: RouteLocationNormalized) { const findTab = this.getTabList.find((item) => item === route); if (findTab) { findTab.meta.title = title; // meta實(shí)現(xiàn) 設(shè)置每個(gè)頁(yè)面的title標(biāo)題 await this.updateCacheTab(); } },
在標(biāo)簽頁(yè)組件中,根據(jù)傳入打開(kāi)頁(yè)面路由記錄tabItem
,標(biāo)簽頁(yè)標(biāo)題名稱綁定計(jì)算屬性 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, }, // 獲取標(biāo)題信息 const getTitle = computed(() => { const { tabItem: { meta } = {} } = props; return meta && t(meta.title as string); });
以上就是Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)的詳細(xì)內(nèi)容,更多關(guān)于Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略
這篇文章主要介紹了vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue+element實(shí)現(xiàn)打印頁(yè)面功能
這篇文章主要介紹了vue+element實(shí)現(xiàn)打印頁(yè)面功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-09-09vue中vxe-table虛擬滾動(dòng)列表的使用詳解
vxe-table 是一個(gè)功能強(qiáng)大的 Vue 表格組件,它支持虛擬滾動(dòng)列表作為其核心功能之一,本文主要介紹一下vxe-table的虛擬滾動(dòng)列表功能的使用場(chǎng)景和優(yōu)勢(shì),感興趣的可以了解下2023-12-12Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05淺談在不使用ssr的情況下解決Vue單頁(yè)面SEO問(wèn)題(2)
這篇文章主要介紹了淺談在不使用ssr的情況下解決Vue單頁(yè)面SEO問(wèn)題(2),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題
這篇文章主要介紹了關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10