refactor ts

src/store/modules/settings.ts

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import defaultSettings from '@/settings';
+import { SettingTypeEnum } from '@/enums/SettingTypeEnum';
+import { useDynamicTitle } from '@/utils/dynamicTitle';
+import { Ref } from 'vue';
+
+export const useSettingsStore = defineStore('setting', () => {
+	const storageSetting = JSON.parse(localStorage.getItem('layout-setting') || '{}');
+
+	const prop: { [key: string]: Ref<any> } = {
+		title: ref<string>(''),
+		theme: ref<string>(storageSetting.theme || defaultSettings.theme),
+		sideTheme: ref<string>(storageSetting.sideTheme || defaultSettings.sideTheme),
+		showSettings: ref<boolean>(storageSetting.showSettings),
+		topNav: ref<boolean>(storageSetting.topNav || defaultSettings.topNav),
+		tagsView: ref<boolean>(storageSetting.tagsView || defaultSettings.tagsView),
+		fixedHeader: ref<boolean>(storageSetting.fixedHeader || defaultSettings.fixedHeader),
+		sidebarLogo: ref<boolean>(storageSetting.sidebarLogo || defaultSettings.sidebarLogo),
+		dynamicTitle: ref<boolean>(storageSetting.dynamicTitle || defaultSettings.dynamicTitle),
+		animationEnable: ref<boolean>(storageSetting.animationEnable || defaultSettings.animationEnable),
+		dark: ref<boolean>(storageSetting.dark || defaultSettings.dark)
+	};
+
+	const { title, theme, sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle, animationEnable, dark } = prop;
+
+	// actions
+	const changeSetting = (param: { key: SettingTypeEnum; value: any }) => {
+		const { key, value } = param;
+		if (key in prop) {
+			prop[key].value = value;
+		}
+	};
+	const setTitle = (value: string) => {
+		title.value = value;
+		useDynamicTitle();
+	};
+	return {
+		title,
+		theme,
+		sideTheme,
+		showSettings,
+		topNav,
+		tagsView,
+		fixedHeader,
+		sidebarLogo,
+		dynamicTitle,
+		animationEnable,
+		dark,
+		changeSetting,
+		setTitle
+	};
+});
+
+export default useSettingsStore;