perf: Improve the use of store in the app
This commit is contained in:
@@ -19,14 +19,18 @@ import {
|
||||
MdiPin,
|
||||
MdiPinOff,
|
||||
} from '@vben-core/iconify';
|
||||
import { storeToRefs, useAccessStore, useTabbarStore } from '@vben-core/stores';
|
||||
import {
|
||||
storeToRefs,
|
||||
useCoreAccessStore,
|
||||
useCoreTabbarStore,
|
||||
} from '@vben-core/stores';
|
||||
import { filterTree } from '@vben-core/toolkit';
|
||||
|
||||
function useTabs() {
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const accessStore = useAccessStore();
|
||||
const tabsStore = useTabbarStore();
|
||||
const accessStore = useCoreAccessStore();
|
||||
const tabbarStore = useCoreTabbarStore();
|
||||
const { accessMenus } = storeToRefs(accessStore);
|
||||
|
||||
const currentActive = computed(() => {
|
||||
@@ -35,7 +39,7 @@ function useTabs() {
|
||||
|
||||
const { locale } = useI18n();
|
||||
const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
|
||||
watch([() => tabsStore.getTabs, () => locale.value], ([tabs, _]) => {
|
||||
watch([() => tabbarStore.getTabs, () => locale.value], ([tabs, _]) => {
|
||||
currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
|
||||
});
|
||||
|
||||
@@ -46,7 +50,7 @@ function useTabs() {
|
||||
const affixTabs = filterTree(router.getRoutes(), (route) => {
|
||||
return !!route.meta?.affixTab;
|
||||
});
|
||||
tabsStore.setAffixTabs(affixTabs);
|
||||
tabbarStore.setAffixTabs(affixTabs);
|
||||
};
|
||||
|
||||
// 点击tab,跳转路由
|
||||
@@ -56,7 +60,7 @@ function useTabs() {
|
||||
|
||||
// 关闭tab
|
||||
const handleClose = async (key: string) => {
|
||||
await tabsStore.closeTabByKey(key, router);
|
||||
await tabbarStore.closeTabByKey(key, router);
|
||||
};
|
||||
|
||||
function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
|
||||
@@ -80,14 +84,14 @@ function useTabs() {
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
tabsStore.addTab(route as RouteLocationNormalized);
|
||||
tabbarStore.addTab(route as RouteLocationNormalized);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const createContextMenus = (tab: TabItem) => {
|
||||
const tabs = tabsStore.getTabs;
|
||||
const affixTabs = tabsStore.affixTabs;
|
||||
const tabs = tabbarStore.getTabs;
|
||||
const affixTabs = tabbarStore.affixTabs;
|
||||
const index = tabs.findIndex((item) => item.path === tab.path);
|
||||
|
||||
const disabled = tabs.length <= 1;
|
||||
@@ -109,7 +113,7 @@ function useTabs() {
|
||||
{
|
||||
disabled: !isCurrentTab,
|
||||
handler: async () => {
|
||||
await tabsStore.refreshTab(router);
|
||||
await tabbarStore.refresh(router);
|
||||
},
|
||||
icon: IcRoundRefresh,
|
||||
key: 'reload',
|
||||
@@ -118,7 +122,7 @@ function useTabs() {
|
||||
{
|
||||
disabled: !!affixTab || disabled,
|
||||
handler: async () => {
|
||||
await tabsStore.closeTab(tab, router);
|
||||
await tabbarStore.closeTab(tab, router);
|
||||
},
|
||||
icon: IcRoundClose,
|
||||
key: 'close',
|
||||
@@ -127,8 +131,8 @@ function useTabs() {
|
||||
{
|
||||
handler: async () => {
|
||||
await (affixTab
|
||||
? tabsStore.unPushPinTab(tab)
|
||||
: tabsStore.pushPinTab(tab));
|
||||
? tabbarStore.unPushPinTab(tab)
|
||||
: tabbarStore.pushPinTab(tab));
|
||||
},
|
||||
icon: affixTab ? MdiPinOff : MdiPin,
|
||||
key: 'affix',
|
||||
@@ -140,7 +144,7 @@ function useTabs() {
|
||||
{
|
||||
disabled: closeLeftDisabled,
|
||||
handler: async () => {
|
||||
await tabsStore.closeLeftTabs(tab);
|
||||
await tabbarStore.closeLeftTabs(tab);
|
||||
},
|
||||
icon: MdiFormatHorizontalAlignLeft,
|
||||
key: 'close-left',
|
||||
@@ -149,7 +153,7 @@ function useTabs() {
|
||||
{
|
||||
disabled: closeRightDisabled,
|
||||
handler: async () => {
|
||||
await tabsStore.closeRightTabs(tab);
|
||||
await tabbarStore.closeRightTabs(tab);
|
||||
},
|
||||
icon: MdiFormatHorizontalAlignRight,
|
||||
key: 'close-right',
|
||||
@@ -159,7 +163,7 @@ function useTabs() {
|
||||
{
|
||||
disabled: closeOtherDisabled,
|
||||
handler: async () => {
|
||||
await tabsStore.closeOtherTabs(tab);
|
||||
await tabbarStore.closeOtherTabs(tab);
|
||||
},
|
||||
icon: MdiArrowExpandHorizontal,
|
||||
key: 'close-other',
|
||||
@@ -168,7 +172,7 @@ function useTabs() {
|
||||
{
|
||||
disabled,
|
||||
handler: async () => {
|
||||
await tabsStore.closeAllTabs(router);
|
||||
await tabbarStore.closeAllTabs(router);
|
||||
},
|
||||
icon: IcRoundMultipleStop,
|
||||
key: 'close-all',
|
||||
@@ -187,7 +191,7 @@ function useTabs() {
|
||||
* 取消固定标签页
|
||||
*/
|
||||
const handleUnPushPin = async (tab: TabItem) => {
|
||||
await tabsStore.unPushPinTab(tab);
|
||||
await tabbarStore.unPushPinTab(tab);
|
||||
};
|
||||
|
||||
return {
|
||||
|
Reference in New Issue
Block a user