perf: 代码优化 store/modules/app

src/constants/app-key.ts

@@ -0,0 +1,13 @@
+/** 设备类型 */
+export enum DeviceEnum {
+  Mobile,
+  Desktop
+}
+
+/** 侧边栏打开状态常量 */
+export const SIDEBAR_OPENED = "opened"
+/** 侧边栏关闭状态常量 */
+export const SIDEBAR_CLOSED = "closed"
+
+export type SidebarOpened = typeof SIDEBAR_OPENED
+export type SidebarClosed = typeof SIDEBAR_CLOSED

src/layout/hooks/useResize.ts

@@ -1,6 +1,7 @@
 import { watch, onBeforeMount, onMounted, onBeforeUnmount } from "vue"
 import { useRoute } from "vue-router"
-import { useAppStore, DeviceEnum } from "@/store/modules/app"
+import { useAppStore } from "@/store/modules/app"
+import { DeviceEnum } from "@/constants/app-key"
 
 /** 参考 Bootstrap 的响应式设计 WIDTH = 992 */
 const WIDTH = 992

src/layout/index.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { computed } from "vue"
-import { useAppStore, DeviceEnum } from "@/store/modules/app"
+import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import { AppMain, NavigationBar, Settings, Sidebar, TagsView, RightPanel } from "./components"
 import useResize from "./hooks/useResize"
+import { DeviceEnum } from "@/constants/app-key"
 
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()

src/store/modules/app.ts

@@ -1,38 +1,44 @@
-import { reactive, ref } from "vue"
+import { reactive, ref, watch } from "vue"
 import { defineStore } from "pinia"
 import { getSidebarStatus, setSidebarStatus } from "@/utils/cache/localStorage"
-
+import { DeviceEnum, SIDEBAR_OPENED, SIDEBAR_CLOSED } from "@/constants/app-key"
-export enum DeviceEnum {
-  Mobile,
-  Desktop
-}
 
 interface Sidebar {
   opened: boolean
   withoutAnimation: boolean
 }
 
+/** 设置侧边栏状态本地缓存 */
+function handleSidebarStatus(opened: boolean) {
+  opened ? setSidebarStatus(SIDEBAR_OPENED) : setSidebarStatus(SIDEBAR_CLOSED)
+}
+
 export const useAppStore = defineStore("app", () => {
+  /** 侧边栏状态 */
   const sidebar: Sidebar = reactive({
-    opened: getSidebarStatus() !== "closed",
+    opened: getSidebarStatus() !== SIDEBAR_CLOSED,
     withoutAnimation: false
   })
+  /** 设备类型 */
   const device = ref<DeviceEnum>(DeviceEnum.Desktop)
 
+  /** 监听侧边栏 opened 状态 */
+  watch(
+    () => sidebar.opened,
+    (opened) => handleSidebarStatus(opened)
+  )
+
+  /** 切换侧边栏 */
   const toggleSidebar = (withoutAnimation: boolean) => {
     sidebar.opened = !sidebar.opened
     sidebar.withoutAnimation = withoutAnimation
-    if (sidebar.opened) {
-      setSidebarStatus("opened")
-    } else {
-      setSidebarStatus("closed")
-    }
   }
+  /** 关闭侧边栏 */
   const closeSidebar = (withoutAnimation: boolean) => {
     sidebar.opened = false
     sidebar.withoutAnimation = withoutAnimation
-    setSidebarStatus("closed")
   }
+  /** 切换设备类型 */
   const toggleDevice = (value: DeviceEnum) => {
     device.value = value
   }

src/utils/cache/localStorage.ts

@@ -1,12 +1,13 @@
 /** 统一处理 localStorage */
 
 import CacheKey from "@/constants/cacheKey"
+import { type SidebarOpened, type SidebarClosed } from "@/constants/app-key"
 import { type ThemeName } from "@/hooks/useTheme"
 
 export const getSidebarStatus = () => {
   return localStorage.getItem(CacheKey.SIDEBAR_STATUS)
 }
-export const setSidebarStatus = (sidebarStatus: "opened" | "closed") => {
+export const setSidebarStatus = (sidebarStatus: SidebarOpened | SidebarClosed) => {
   localStorage.setItem(CacheKey.SIDEBAR_STATUS, sidebarStatus)
 }