From 516fcba5ed90b0732712abce4bed8d3e75ecc91f Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Tue, 7 Sep 2021 14:40:15 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=20script=20setup=20=E8=AF=AD=E6=B3=95?=
 =?UTF-8?q?=E7=B3=96=E9=87=8D=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 131 +++++++++++++++++++++++-----------------------------
 1 file changed, 58 insertions(+), 73 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 581c620c..cd581984 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,79 +2,64 @@
     <RouterView />
 </template>
 
-<script>
-export default {
-    data() {
-        return {}
-    },
-    watch: {
-        '$store.state.settings.mode': {
-            handler() {
-                if (this.$store.state.settings.mode === 'pc') {
-                    this.$store.commit('settings/updateThemeSetting', {
-                        'sidebarCollapse': this.$store.state.settings.sidebarCollapseLastStatus
-                    })
-                } else if (this.$store.state.settings.mode === 'mobile') {
-                    this.$store.commit('settings/updateThemeSetting', {
-                        'sidebarCollapse': true
-                    })
-                }
-                document.body.setAttribute('data-mode', this.$store.state.settings.mode)
-            },
-            immediate: true
-        },
-        '$store.state.settings.menuMode': {
-            handler() {
-                this.setMenuMode()
-            },
-            immediate: true
-        },
-        '$store.state.settings.sidebarCollapse': {
-            handler() {
-                this.setMenuMode()
-            },
-            immediate: true
-        },
-        '$store.state.settings.enableDynamicTitle': {
-            handler() {
-                this.setDocumentTitle()
-            },
-            immediate: true
-        },
-        '$store.state.settings.title': {
-            handler() {
-                this.setDocumentTitle()
-            },
-            immediate: true
-        }
-    },
-    mounted() {
-        window.onresize = () => {
-            this.$store.commit('settings/setMode', document.documentElement.clientWidth)
-        }
-        window.onresize()
-    },
-    methods: {
-        setDocumentTitle() {
-            if (this.$store.state.settings.enableDynamicTitle && this.$store.state.settings.title) {
-                let title = this.$store.state.settings.title
-                document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
-            } else {
-                document.title = import.meta.env.VITE_APP_TITLE
-            }
-        },
-        setMenuMode() {
-            document.body.removeAttribute('data-sidebar-no-collapse')
-            document.body.removeAttribute('data-sidebar-collapse')
-            if (['side', 'head', 'single'].includes(this.$store.state.settings.menuMode)) {
-                if (this.$store.state.settings.sidebarCollapse) {
-                    document.body.setAttribute('data-sidebar-collapse', '')
-                } else {
-                    document.body.setAttribute('data-sidebar-no-collapse', '')
-                }
-            }
-            document.body.setAttribute('data-menu-mode', this.$store.state.settings.menuMode)
-        }
+<script setup>
+import { watch, onMounted } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+watch(() => store.state.settings.mode, () => {
+    if (store.state.settings.mode === 'pc') {
+        store.commit('settings/updateThemeSetting', {
+            'sidebarCollapse': store.state.settings.sidebarCollapseLastStatus
+        })
+    } else if (store.state.settings.mode === 'mobile') {
+        store.commit('settings/updateThemeSetting', {
+            'sidebarCollapse': true
+        })
+    }
+    document.body.setAttribute('data-mode', store.state.settings.mode)
+}, {
+    immediate: true
+})
+
+watch([
+    () => store.state.settings.menuMode,
+    () => store.state.settings.sidebarCollapse
+], () => setMenuMode(), {
+    immediate: true
+})
+
+watch([
+    () => store.state.settings.enableDynamicTitle,
+    () => store.state.settings.title
+], () => setDocumentTitle(), {
+    immediate: true
+})
+
+onMounted(() => {
+    window.onresize = () => {
+        store.commit('settings/setMode', document.documentElement.clientWidth)
+    }
+    window.onresize()
+})
+
+function setDocumentTitle() {
+    if (store.state.settings.enableDynamicTitle && store.state.settings.title) {
+        let title = store.state.settings.title
+        document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
+    } else {
+        document.title = import.meta.env.VITE_APP_TITLE
     }
 }
+function setMenuMode() {
+    document.body.removeAttribute('data-sidebar-no-collapse')
+    document.body.removeAttribute('data-sidebar-collapse')
+    if (store.state.settings.sidebarCollapse) {
+        document.body.setAttribute('data-sidebar-collapse', '')
+    } else {
+        document.body.setAttribute('data-sidebar-no-collapse', '')
+    }
+    document.body.setAttribute('data-menu-mode', store.state.settings.menuMode)
+}
 </script>