refactor: 优化pinia setup store组合式函数写法

Former-commit-id: 27347ede51d0952d3422c3a6c3a86652f91e5639

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import SidebarItem from './SidebarItem.vue';
+import Logo from './Logo.vue';
+import variables from '@/styles/variables.module.scss';
+
+import { useSettingsStore } from '@/store/modules/settings';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useAppStore } from '@/store/modules/app';
+import { storeToRefs } from 'pinia';
+
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const appStore = useAppStore();
+
+const { sidebarLogo } = storeToRefs(settingsStore);
+const route = useRoute();
+
+const isCollapse = computed(() => !appStore.sidebar.opened);
+
+const activeMenu = computed<string>(() => {
+  const { meta, path } = route;
+  if (meta?.activeMenu) {
+    return meta.activeMenu as string;
+  }
+  return path;
+});
+</script>
+
 <template>
-  <div :class="{ 'has-logo': showLogo }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+  <div :class="{ 'has-logo': sidebarLogo }">
+    <logo v-if="sidebarLogo" :collapse="isCollapse" />
     <el-scrollbar>
       <el-menu
         :default-active="activeMenu"
@@ -13,7 +44,7 @@
         mode="vertical"
       >
         <sidebar-item
-          v-for="route in routes"
+          v-for="route in permissionStore.routes"
           :item="route"
           :key="route.path"
           :base-path="route.path"
@@ -23,29 +54,3 @@
     </el-scrollbar>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-
-import SidebarItem from './SidebarItem.vue';
-import Logo from './Logo.vue';
-import variables from '@/styles/variables.module.scss';
-import useStore from '@/store';
-
-const { permission, setting, app } = useStore();
-
-const route = useRoute();
-const routes = computed(() => permission.routes);
-const showLogo = computed(() => setting.sidebarLogo);
-const isCollapse = computed(() => !app.sidebar.opened);
-
-const activeMenu = computed(() => {
-  const { meta, path } = route;
-  // if set path, the sidebar will highlight the path you set
-  if (meta.activeMenu) {
-    return meta.activeMenu as string;
-  }
-  return path;
-});
-</script>