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>