refactor: refactor store

src/store/modules/locale.ts

@@ -1,44 +1,55 @@
-import store from '/@/store';
+import type { LocaleSetting, LocaleType } from '/#/config';
 
-import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators';
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
 
 import { LOCALE_KEY } from '/@/enums/cacheEnum';
-
-import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper';
-import { LocaleSetting, LocaleType } from '/#/config';
 import { createLocalStorage } from '/@/utils/cache';
 import { localeSetting } from '/@/settings/localeSetting';
 
 const ls = createLocalStorage();
 
-const lsSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting;
+const lsLocaleSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting;
 
-const NAME = 'app-locale';
-hotModuleUnregisterModule(NAME);
-@Module({ dynamic: true, namespaced: true, store, name: NAME })
-class Locale extends VuexModule {
-  private info: LocaleSetting = lsSetting;
-
-  get getShowPicker(): boolean {
-    return !!this.info?.showPicker;
-  }
-
-  get getLocale(): LocaleType {
-    return this.info?.locale;
-  }
-
-  @Mutation
-  setLocaleInfo(info: Partial<LocaleSetting>): void {
-    this.info = { ...this.info, ...info };
-    ls.set(LOCALE_KEY, this.info);
-  }
-
-  @Action
-  initLocale(): void {
-    this.setLocaleInfo({
-      ...localeSetting,
-      ...this.info,
-    });
-  }
+interface LocaleState {
+  localInfo: LocaleSetting;
+}
+
+export const useLocaleStore = defineStore({
+  id: 'app-locale',
+  state: (): LocaleState => ({
+    localInfo: lsLocaleSetting,
+  }),
+  getters: {
+    getShowPicker() {
+      return !!this.localInfo?.showPicker;
+    },
+    getLocale(): LocaleType {
+      return this.localInfo?.locale ?? 'zh_CN';
+    },
+  },
+  actions: {
+    /**
+     * Set up multilingual information and cache
+     * @param info multilingual info
+     */
+    setLocaleInfo(info: Partial<LocaleSetting>) {
+      this.localInfo = { ...this.localInfo, ...info };
+      ls.set(LOCALE_KEY, this.localInfo);
+    },
+    /**
+     * Initialize multilingual information and load the existing configuration from the local cache
+     */
+    initLocale() {
+      this.setLocaleInfo({
+        ...localeSetting,
+        ...this.localInfo,
+      });
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useLocaleStoreWithOut() {
+  return useLocaleStore(store);
 }
-export const localeStore = getModule<Locale>(Locale);