refactor: Settings Component

src/layout/components/Settings/index.vue

@@ -1,62 +1,7 @@
 <script lang="ts" setup>
-import { reactive, watch } from "vue"
 import { useSettingsStore } from "@/store/modules/settings"
 
 const settingsStore = useSettingsStore()
-
-const state = reactive({
-  fixedHeader: settingsStore.fixedHeader,
-  showTagsView: settingsStore.showTagsView,
-  showSidebarLogo: settingsStore.showSidebarLogo,
-  showThemeSwitch: settingsStore.showThemeSwitch,
-  showScreenfull: settingsStore.showScreenfull
-})
-
-watch(
-  () => state.fixedHeader,
-  (value) => {
-    settingsStore.changeSetting({
-      key: "fixedHeader",
-      value
-    })
-  }
-)
-watch(
-  () => state.showTagsView,
-  (value) => {
-    settingsStore.changeSetting({
-      key: "showTagsView",
-      value
-    })
-  }
-)
-watch(
-  () => state.showSidebarLogo,
-  (value) => {
-    settingsStore.changeSetting({
-      key: "showSidebarLogo",
-      value
-    })
-  }
-)
-watch(
-  () => state.showThemeSwitch,
-  (value) => {
-    settingsStore.changeSetting({
-      key: "showThemeSwitch",
-      value
-    })
-  }
-)
-watch(
-  () => state.showScreenfull,
-  (value) => {
-    settingsStore.changeSetting({
-      key: "showScreenfull",
-      value
-    })
-  }
-)
 </script>
 
 <template>
@@ -65,23 +10,23 @@ watch(
       <h3 class="drawer-title">系统布局配置</h3>
       <div class="drawer-item">
         <span>显示标签栏</span>
-        <el-switch v-model="state.showTagsView" class="drawer-switch" />
+        <el-switch v-model="settingsStore.showTagsView" class="drawer-switch" />
       </div>
       <div class="drawer-item">
         <span>显示侧边栏 Logo</span>
-        <el-switch v-model="state.showSidebarLogo" class="drawer-switch" />
+        <el-switch v-model="settingsStore.showSidebarLogo" class="drawer-switch" />
       </div>
       <div class="drawer-item">
         <span>固定 Header</span>
-        <el-switch v-model="state.fixedHeader" class="drawer-switch" />
+        <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
       </div>
       <div class="drawer-item">
         <span>显示切换主题按钮</span>
-        <el-switch v-model="state.showThemeSwitch" class="drawer-switch" />
+        <el-switch v-model="settingsStore.showThemeSwitch" class="drawer-switch" />
       </div>
       <div class="drawer-item">
         <span>显示全屏按钮</span>
-        <el-switch v-model="state.showScreenfull" class="drawer-switch" />
+        <el-switch v-model="settingsStore.showScreenfull" class="drawer-switch" />
       </div>
     </div>
   </div>

src/store/modules/settings.ts

@@ -21,32 +21,5 @@ export const useSettingsStore = defineStore({
       showThemeSwitch: layoutSettings.showThemeSwitch,
       showScreenfull: layoutSettings.showScreenfull
     }
-  },
-  actions: {
-    changeSetting(payload: { key: string; value: any }) {
-      const { key, value } = payload
-      switch (key) {
-        case "fixedHeader":
-          this.fixedHeader = value
-          break
-        case "showSettings":
-          this.showSettings = value
-          break
-        case "showSidebarLogo":
-          this.showSidebarLogo = value
-          break
-        case "showTagsView":
-          this.showTagsView = value
-          break
-        case "showThemeSwitch":
-          this.showThemeSwitch = value
-          break
-        case "showScreenfull":
-          this.showScreenfull = value
-          break
-        default:
-          break
-      }
-    }
   }
 })