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

Former-commit-id: 27347ede51d0952d3422c3a6c3a86652f91e5639

src/layout/index.vue

@@ -1,15 +1,72 @@
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue';
+import { useWindowSize } from '@vueuse/core';
+import { AppMain, Navbar, Settings, TagsView } from './components/index';
+import Sidebar from './components/Sidebar/index.vue';
+import RightPanel from '@/components/RightPanel/index.vue';
+
+import { DeviceType, useAppStore } from '@/store/modules/app';
+import { useSettingsStore } from '@/store/modules/settings';
+
+const { width } = useWindowSize();
+
+/**
+ * 响应式布局容器固定宽度
+ *
+ * 大屏（>=1200px）
+ * 中屏（>=992px）
+ * 小屏（>=768px）
+ */
+const WIDTH = 992;
+
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+const showTagsView = computed(() => settingsStore.tagsView);
+const showSettings = computed(() => settingsStore.showSettings);
+
+const classObj = computed(() => ({
+  hideSidebar: !appStore.sidebar.opened,
+  openSidebar: appStore.sidebar.opened,
+  withoutAnimation: appStore.sidebar.withoutAnimation,
+  mobile: appStore.device === DeviceType.mobile
+}));
+
+watchEffect(() => {
+  if (width.value < WIDTH) {
+    appStore.toggleDevice(DeviceType.mobile);
+    appStore.closeSideBar(true);
+  } else {
+    appStore.toggleDevice(DeviceType.desktop);
+
+    if (width.value >= 1200) {
+      //大屏
+      appStore.openSideBar(true);
+    } else {
+      appStore.closeSideBar(true);
+    }
+  }
+});
+
+function handleOutsideClick() {
+  appStore.closeSideBar(false);
+}
+</script>
+
 <template>
   <div :class="classObj" class="app-wrapper">
+    <!-- 手机设备 && 侧边栏 → 显示遮罩层 -->
     <div
-      v-if="device === 'mobile' && sidebar.opened"
+      v-if="classObj.mobile && classObj.openSidebar"
       class="drawer-bg"
-      @click="handleClickOutside"
-    />
+      @click="handleOutsideClick"
+    ></div>
     <Sidebar class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView }" class="main-container">
+    <div :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
-        <tags-view v-if="needTagsView" />
+        <tags-view v-if="showTagsView" />
       </div>
 
       <!--主页面-->
@@ -23,47 +80,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, watchEffect } from 'vue';
-import { useWindowSize } from '@vueuse/core';
-import { AppMain, Navbar, Settings, TagsView } from './components/index';
-import Sidebar from './components/Sidebar/index.vue';
-import RightPanel from '@/components/RightPanel/index.vue';
-
-import useStore from '@/store';
-
-const { width } = useWindowSize();
-const WIDTH = 992;
-
-const { app, setting } = useStore();
-
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-const needTagsView = computed(() => setting.tagsView);
-const fixedHeader = computed(() => setting.fixedHeader);
-const showSettings = computed(() => setting.showSettings);
-
-const classObj = computed(() => ({
-  hideSidebar: !sidebar.value.opened,
-  openSidebar: sidebar.value.opened,
-  withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === 'mobile'
-}));
-
-watchEffect(() => {
-  if (width.value < WIDTH) {
-    app.toggleDevice('mobile');
-    app.closeSideBar(true);
-  } else {
-    app.toggleDevice('desktop');
-  }
-});
-
-function handleClickOutside() {
-  app.closeSideBar(false);
-}
-</script>
-
 <style lang="scss" scoped>
 @import '@/styles/mixin.scss';
 @import '@/styles/variables.module.scss';
@@ -79,7 +95,6 @@ function handleClickOutside() {
     top: 0;
   }
 }
-
 .drawer-bg {
   background: #000;
   opacity: 0.3;
@@ -98,11 +113,9 @@ function handleClickOutside() {
   width: calc(100% - #{$sideBarWidth});
   transition: width 0.28s;
 }
-
 .hideSidebar .fixed-header {
   width: calc(100% - 54px);
 }
-
 .mobile .fixed-header {
   width: 100%;
 }