refactor: 暗黑模式切换的设置项吸入settingStore中

meadmin-cn · Sep 1, 2022 · 7f7c306 · 7f7c306
1 parent 66dc9f1
commit 7f7c306
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/meDarkSwitch.vue b/src/components/meDarkSwitch.vue
@@ -1,15 +1,16 @@
 <template>
-  <div :class="{ 'el-switch': true, 'is-checked': isDark }" @click="isDark = !isDark">
+  <div :class="{ 'el-switch': true, 'is-checked': setting.isDark }" @click="setting.isDark = !setting.isDark">
     <span class="el-switch__core">
       <div class="el-switch__action">
-        <me-icon-sunny v-show="!isDark" class="icon"></me-icon-sunny>
-        <me-icon-moon v-show="isDark" class="icon"></me-icon-moon>
+        <me-icon-sunny v-show="!setting.isDark" class="icon"></me-icon-sunny>
+        <me-icon-moon v-show="setting.isDark" class="icon"></me-icon-moon>
       </div>
     </span>
   </div>
 </template>
 <script setup lang="ts" name="meDarkSwitch">
-const isDark = useDark({ storageKey: 'me-color-dark-scheme' });
+import { useSettingStore } from '@/store';
+const setting = useSettingStore();
 </script>
 <style lang="scss" scoped>
 .el-switch {

diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
@@ -8,6 +8,7 @@ const useSettingStore = defineStore('setting', {
     themeConfig: useStorage(`${settingKey}-theme`, themeConfig),
     locale: useStorage(`${settingKey}-locale`, localeConfig.localeSetting.locale ?? 'zh-cn'),
     elLocale: undefined as Language | undefined,
+    isDark: useDark({ storageKey: 'me-color-dark-scheme' }),
   }),
   actions: {
     setPrimaryStyle() {