From 5c09716fa51356b36dd35baed3cea23084e4e2c4 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Wed, 24 May 2023 18:24:06 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96=20?=
 =?UTF-8?q?store/modules/app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/app-key.ts        | 13 +++++++++++++
 src/layout/hooks/useResize.ts   |  3 ++-
 src/layout/index.vue            |  3 ++-
 src/store/modules/app.ts        | 32 +++++++++++++++++++-------------
 src/utils/cache/localStorage.ts |  3 ++-
 5 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 src/constants/app-key.ts

diff --git a/src/constants/app-key.ts b/src/constants/app-key.ts
new file mode 100644
index 0000000..4c921c5
--- /dev/null
+++ b/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
diff --git a/src/layout/hooks/useResize.ts b/src/layout/hooks/useResize.ts
index 1cb7611..f2b4027 100644
--- a/src/layout/hooks/useResize.ts
+++ b/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
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 605df28..ffdece1 100644
--- a/src/layout/index.vue
+++ b/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()
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index e13c73a..06e0d0a 100644
--- a/src/store/modules/app.ts
+++ b/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"
-
-export enum DeviceEnum {
-  Mobile,
-  Desktop
-}
+import { DeviceEnum, SIDEBAR_OPENED, SIDEBAR_CLOSED } from "@/constants/app-key"
 
 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
   }
diff --git a/src/utils/cache/localStorage.ts b/src/utils/cache/localStorage.ts
index 422501e..db03729 100644
--- a/src/utils/cache/localStorage.ts
+++ b/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)
 }