fix: 修复结构store失去响应问题

src/layout/components/header/components/tagBar/index.vue

@@ -67,7 +67,7 @@ import contextmenu from './components/contextmenu.vue';
 import { isExternal } from '@/utils/validate';
 import { resolve } from 'path-browserify';
 import $ from 'jquery';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 // 初始化tags
 const tags = reactive([] as RouteLocationNormalized[]);
 const resolvePath = (routePath: string, basePath = '') => {

src/layout/components/header/components/topBar/components/left.vue

@@ -24,17 +24,17 @@
 import { mitter, event } from '@/event';
 import { useSettingStore, useGlobalStore, useRouteStore } from '@/store';
 import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 const globalStore = useGlobalStore();
 const setMenuCollapse = () => {
-  themeConfig.menuCollapse = !themeConfig.menuCollapse;
+  themeConfig.value.menuCollapse = !themeConfig.value.menuCollapse;
 };
 const breadcrumbList = ref([] as Pick<RouteRecordRaw, 'name' | 'path' | 'meta' | 'redirect'>[]);
 const route = useRoute();
-const { routes } = useRouteStore();
+const { routes } = storeToRefs(useRouteStore());
 const setBreadcrumbList = (route: RouteLocationNormalized) => {
   const list = [] as Pick<RouteRecordRaw, 'name' | 'path' | 'meta' | 'redirect'>[];
-  let temp = { children: routes } as unknown as RouteRecordRaw;
+  let temp = { children: routes.value } as unknown as RouteRecordRaw;
   route.meta.menuIndex!.forEach((item) => {
     temp = temp.children![item];
     if (temp.meta && temp.meta.title && temp.meta.breadcrumb !== false) {

src/layout/components/header/components/topBar/components/right/index.vue

@@ -15,7 +15,7 @@ import { localeConfig } from '@/config';
 import MessageBox from './components/messageBox.vue';
 import { useSettingStore } from '@/store';
 import User from './components/user.vue';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 </script>
 <style lang="scss" scoped>
 .right {

src/layout/components/header/index.vue

@@ -8,7 +8,7 @@
 import { useSettingStore } from '@/store';
 import TopBar from './components/topBar/index.vue';
 import TagBar from './components/tagBar/index.vue';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 </script>
 <style lang="scss" scoped>
 .layout-header {

src/layout/index.vue

@@ -36,7 +36,7 @@ import LayoutHeader from './components/header/index.vue';
 import LayoutMenu from './components/menu/index.vue';
 import LayoutPage from './components/page.vue';
 import { useSettingStore, useGlobalStore } from '@/store';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 const globalStore = useGlobalStore();
 onMounted(() => {
   nextTick(() => (globalStore.layoutLoaded = true));

src/views/login/components/header.vue

@@ -8,7 +8,7 @@
 <script setup lang="ts" name="Header">
 import { localeConfig } from '@/config';
 import { useSettingStore } from '@/store';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 </script>
 <style lang="scss" scoped>
 .header {

types/auto-imports.d.ts

@@ -2,6 +2,8 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']