refactor: useTheme 中使用 initTheme 方法显式执行初始化 (#65)

src/App.vue

@@ -4,8 +4,10 @@ import { useTheme } from "@/hooks/useTheme"
 import { ElNotification } from "element-plus"
 import zhCn from "element-plus/lib/locale/lang/zh-cn"
 
+const { initTheme } = useTheme()
+
 /** 初始化主题 */
-useTheme()
+initTheme()
 /** 将 Element Plus 的语言设置为中文 */
 const locale = zhCn
 

src/hooks/useTheme.ts

@@ -40,13 +40,15 @@ const setHtmlClassName = (value: ThemeName) => {
   document.documentElement.className = value
 }
 
-watchEffect(() => {
-  const value = activeThemeName.value
-  setHtmlClassName(value)
-  setActiveThemeName(value)
-})
+const initTheme = () => {
+  watchEffect(() => {
+    const value = activeThemeName.value
+    setHtmlClassName(value)
+    setActiveThemeName(value)
+  })
+}
 
 /** 主题 hook */
 export function useTheme() {
-  return { themeList, activeThemeName, setTheme }
+  return { themeList, activeThemeName, initTheme, setTheme }
 }