refactor(projects): 去除在pinia的getters的函数调用副作用，用watch代替

src/store/modules/theme/helpers.ts

@@ -1,5 +1,5 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { cloneDeep, kebabCase } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 import { themeSetting } from '@/settings';
 import { getThemeColor, getColorPalette, addColorAlpha } from '@/utils';
 
@@ -72,20 +72,6 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
   };
 }
 
-type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
-type ThemeVarsKeys = keyof ThemeVars;
-
-/** 添加css vars至html */
-export function addThemeCssVarsToHtml(themeVars: ThemeVars) {
-  const keys = Object.keys(themeVars) as ThemeVarsKeys[];
-  const style: string[] = [];
-  keys.forEach(key => {
-    style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
-  });
-  const styleStr = style.join(';');
-  document.documentElement.style.cssText += styleStr;
-}
-
 /** windicss 暗黑模式 */
 export function handleWindicssDarkMode() {
   const DARK_CLASS = 'dark';

src/store/modules/theme/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { darkTheme } from 'naive-ui';
-import { getThemeSettings, getNaiveThemeOverrides, addThemeCssVarsToHtml } from './helpers';
+import { getThemeSettings, getNaiveThemeOverrides } from './helpers';
 
 type ThemeState = Theme.Setting;
 
@@ -10,9 +10,6 @@ export const useThemeStore = defineStore('theme-store', {
     /** naiveUI的主题配置 */
     naiveThemeOverrides(state) {
       const overrides = getNaiveThemeOverrides({ primary: state.themeColor, ...state.otherColor });
-      if (overrides.common) {
-        addThemeCssVarsToHtml(overrides.common);
-      }
       return overrides;
     },
     /** naive-ui暗黑主题 */

src/store/subscribe/theme.ts

@@ -1,6 +1,8 @@
 import { watch, onUnmounted } from 'vue';
 import { useOsTheme } from 'naive-ui';
+import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
+import { kebabCase } from 'lodash-es';
 import { setThemeColor } from '@/utils';
 import { useThemeStore } from '../modules';
 
@@ -11,6 +13,7 @@ export default function subscribeThemeStore() {
   const { width } = useElementSize(document.documentElement);
   const { addDarkClass, removeDarkClass } = handleWindicssDarkMode();
 
+  // 监听主题颜色
   const stopThemeColor = watch(
     () => theme.themeColor,
     newValue => {
@@ -19,6 +22,17 @@ export default function subscribeThemeStore() {
     { immediate: true }
   );
 
+  // 监听naiveUI themeOverrides
+  const stopThemeOverrides = watch(
+    () => theme.naiveThemeOverrides,
+    newValue => {
+      if (newValue.common) {
+        addThemeCssVarsToHtml(newValue.common);
+      }
+    },
+    { immediate: true }
+  );
+
   // 监听暗黑模式
   const stopDarkMode = watch(
     () => theme.darkMode,
@@ -55,6 +69,7 @@ export default function subscribeThemeStore() {
 
   onUnmounted(() => {
     stopThemeColor();
+    stopThemeOverrides();
     stopDarkMode();
     stopOsTheme();
     stopWidth();
@@ -75,3 +90,17 @@ function handleWindicssDarkMode() {
     removeDarkClass
   };
 }
+
+type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
+type ThemeVarsKeys = keyof ThemeVars;
+
+/** 添加css vars至html */
+function addThemeCssVarsToHtml(themeVars: ThemeVars) {
+  const keys = Object.keys(themeVars) as ThemeVarsKeys[];
+  const style: string[] = [];
+  keys.forEach(key => {
+    style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
+  });
+  const styleStr = style.join(';');
+  document.documentElement.style.cssText += styleStr;
+}