refactor: 优化pinia setup store组合式函数写法

Former-commit-id: 27347ede51d0952d3422c3a6c3a86652f91e5639
2022-12-18 15:27:53 +08:00
parent fe49485563
commit 2a36afae16
27 changed files with 944 additions and 973 deletions
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,48 +1,96 @@
-import { AppState } from './types';
-import { localStorage } from '@/utils/storage';
+import {
+  getSidebarStatus,
+  setSidebarStatus,
+  getSize,
+  setSize,
+  setLanguage
+} from '@/utils/localStorage';
 import { defineStore } from 'pinia';
 import { getLanguage } from '@/lang/index';
+import { computed, reactive, ref } from 'vue';

-const useAppStore = defineStore({
-  id: 'app',
-  state: (): AppState => ({
-    device: 'desktop',
-    sidebar: {
-      opened: localStorage.get('sidebarStatus')
-        ? !!+localStorage.get('sidebarStatus')
-        : true,
-      withoutAnimation: false,
-    },
-    language: getLanguage(),
-    size: localStorage.get('size') || 'default',
-  }),
-  actions: {
-    toggleSidebar() {
-      this.sidebar.opened = !this.sidebar.opened;
-      this.sidebar.withoutAnimation = false;
-      if (this.sidebar.opened) {
-        localStorage.set('sidebarStatus', 1);
-      } else {
-        localStorage.set('sidebarStatus', 0);
-      }
-    },
-    closeSideBar(withoutAnimation: any) {
-      localStorage.set('sidebarStatus', 0);
-      this.sidebar.opened = false;
-      this.sidebar.withoutAnimation = withoutAnimation;
-    },
-    toggleDevice(device: string) {
-      this.device = device;
-    },
-    setSize(size: string) {
-      this.size = size;
-      localStorage.set('size', size);
-    },
-    setLanguage(language: string) {
-      this.language = language;
-      localStorage.set('language', language);
-    },
-  },
+// Element Plus 语言包
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import en from 'element-plus/es/locale/lang/en';
+
+export enum DeviceType {
+  mobile,
+  desktop
+}
+
+export enum SizeType {
+  default,
+  large,
+  small
+}
+
+// setup
+export const useAppStore = defineStore('app', () => {
+  // state
+  const device = ref<DeviceType>(DeviceType.desktop);
+  const size = ref(getSize() || 'default');
+  const language = ref(getLanguage());
+  const sidebar = reactive({
+    opened: getSidebarStatus() !== 'closed',
+    withoutAnimation: false
+  });
+
+  const locale = computed(() => {
+    if (language?.value == 'en') {
+      return en;
+    } else {
+      return zhCn;
+    }
+  });
+
+  // actions
+  function toggleSidebar(withoutAnimation: boolean) {
+    sidebar.opened = !sidebar.opened;
+    sidebar.withoutAnimation = withoutAnimation;
+    if (sidebar.opened) {
+      setSidebarStatus('opened');
+    } else {
+      setSidebarStatus('closed');
+    }
+  }
+
+  function closeSideBar(withoutAnimation: boolean) {
+    sidebar.opened = false;
+    sidebar.withoutAnimation = withoutAnimation;
+    setSidebarStatus('closed');
+  }
+
+  function openSideBar(withoutAnimation: boolean) {
+    sidebar.opened = true;
+    sidebar.withoutAnimation = withoutAnimation;
+    setSidebarStatus('opened');
+  }
+
+  function toggleDevice(val: DeviceType) {
+    device.value = val;
+  }
+
+  function changeSize(val: string) {
+    size.value = val;
+    setSize(val);
+  }
+
+  function changeLanguage(val: string) {
+    language.value = val;
+    setLanguage(val);
+  }
+
+  return {
+    device,
+    sidebar,
+    language,
+    locale,
+    size,
+    toggleDevice,
+    changeSize,
+    changeLanguage,
+    toggleSidebar,
+    closeSideBar,
+    openSideBar
+  };
 });
-
-export default useAppStore;