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

Former-commit-id: 27347ede51d0952d3422c3a6c3a86652f91e5639

src/layout/components/Sidebar/Link.vue

@@ -1,3 +1,32 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { isExternal } from '@/utils/validate';
+import { useRouter } from 'vue-router';
+
+import { DeviceType, useAppStore } from '@/store/modules/app';
+const appStore = useAppStore();
+
+const sidebar = computed(() => appStore.sidebar);
+const device = computed(() => appStore.device);
+
+const props = defineProps({
+  to: {
+    type: String,
+    required: true
+  }
+});
+
+const router = useRouter();
+function push() {
+  if (device.value === DeviceType.mobile && sidebar.value.opened == true) {
+    appStore.closeSideBar(false);
+  }
+  router.push(props.to).catch(err => {
+    console.error(err);
+  });
+}
+</script>
+
 <template>
   <a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
     <slot />
@@ -6,40 +35,3 @@
     <slot />
   </div>
 </template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { isExternal } from '@/utils/validate';
-import { useRouter } from 'vue-router';
-
-import useStore from '@/store';
-
-const { app } = useStore();
-
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-
-export default defineComponent({
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const router = useRouter();
-    const push = () => {
-      if (device.value === 'mobile' && sidebar.value.opened == true) {
-        app.closeSideBar(false);
-      }
-      router.push(props.to).catch(err => {
-        console.log(err);
-      });
-    };
-    return {
-      push,
-      isExternal
-    };
-  }
-});
-</script>

src/layout/components/Sidebar/Logo.vue

@@ -1,3 +1,18 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const logo = ref<string>(
+  new URL(`../../../assets/logo.png`, import.meta.url).href
+);
+</script>
+
 <template>
   <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition name="sidebarLogoFade">
@@ -18,24 +33,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { reactive, toRefs } from 'vue';
-
-const props = defineProps({
-  collapse: {
-    type: Boolean,
-    required: true
-  }
-});
-
-const state = reactive({
-  isCollapse: props.collapse,
-  logo: new URL(`../../../assets/logo.png`, import.meta.url).href
-});
-
-const { logo } = toRefs(state);
-</script>
-
 <style lang="scss" scoped>
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,51 +1,3 @@
-<template>
-  <div v-if="!item.meta || !item.meta.hidden">
-    <template
-      v-if="
-        hasOneShowingChild(item.children, item) &&
-        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
-        (!item.meta || !item.meta.alwaysShow)
-      "
-    >
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item
-          :index="resolvePath(onlyOneChild.path)"
-          :class="{ 'submenu-title-noDropdown': !isNest }"
-        >
-          <svg-icon
-            v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
-            :icon-class="onlyOneChild.meta.icon"
-          />
-          <template #title>
-            {{ generateTitle(onlyOneChild.meta.title) }}
-          </template>
-        </el-menu-item>
-      </app-link>
-    </template>
-    <el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
-      <!-- popper-append-to-body -->
-      <template #title>
-        <svg-icon
-          v-if="item.meta && item.meta.icon"
-          :icon-class="item.meta.icon"
-        ></svg-icon>
-        <span v-if="item.meta && item.meta.title">{{
-          generateTitle(item.meta.title)
-        }}</span>
-      </template>
-
-      <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
-        :item="child"
-        :is-nest="true"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
-      />
-    </el-sub-menu>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import path from 'path-browserify';
@@ -110,5 +62,52 @@ function resolvePath(routePath: string) {
   return path.resolve(props.basePath, routePath);
 }
 </script>
+<template>
+  <div v-if="!item.meta || !item.meta.hidden">
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        (!item.meta || !item.meta.alwaysShow)
+      "
+    >
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <svg-icon
+            v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
+            :icon-class="onlyOneChild.meta.icon"
+          />
+          <template #title>
+            {{ generateTitle(onlyOneChild.meta.title) }}
+          </template>
+        </el-menu-item>
+      </app-link>
+    </template>
+    <el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
+      <!-- popper-append-to-body -->
+      <template #title>
+        <svg-icon
+          v-if="item.meta && item.meta.icon"
+          :icon-class="item.meta.icon"
+        ></svg-icon>
+        <span v-if="item.meta && item.meta.title">{{
+          generateTitle(item.meta.title)
+        }}</span>
+      </template>
+
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :item="child"
+        :is-nest="true"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-sub-menu>
+  </div>
+</template>
 
 <style lang="scss" scoped></style>

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>