✨ add internationalization / dynamic themes

src/store/index.ts

@@ -1,9 +1,11 @@
 import {useAuthStore} from '@/store/modules/userStore.ts';
 import {useThemeStore} from "@/store/modules/themeStore.ts";
+import {langStore} from "@/store/modules/langStore.ts";
 
 export default function useStore() {
     return {
         user: useAuthStore(),
-        theme: useThemeStore()
+        theme: useThemeStore(),
+        lang: langStore()
     };
 }

src/store/modules/langStore.ts

@@ -0,0 +1,37 @@
+import {defineStore} from 'pinia';
+import {ref} from 'vue';
+import pinia from "@/store/pinia.ts";
+
+export const langStore = defineStore(
+    'lang',
+    () => {
+        const lang = ref<string>('');
+
+        function setLang(value: string) {
+            lang.value = value;
+        }
+
+        function getLang() {
+            return lang.value;
+        }
+
+        return {
+            lang,
+            setLang,
+            getLang,
+        };
+    },
+    {
+        // 开启数据持久化
+        persistedState: {
+            key: 'lang',
+            storage: localStorage,
+            includePaths: ["lang"],
+            overwrite: true,
+        }
+    }
+);
+
+export function useLangStoreWithOut() {
+    return langStore(pinia);
+}

src/store/modules/themeStore.ts

@@ -2,8 +2,6 @@ import {defineStore} from 'pinia';
 import {computed, ref} from 'vue';
 import {theme} from 'ant-design-vue';
 import variables from '@/assets/styles/colors.module.scss';
-import {handleLocalforage} from "@/utils/localforage";
-import {parse, stringify} from "zipson/lib";
 
 /**
  * theme 配置 开启持久化
@@ -41,14 +39,11 @@ export const useThemeStore = defineStore(
         return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode};
     },
     {
-        persist: {
+        persistedState: {
             key: 'theme',
-            paths: ['themeName','darkMode'],
-            storage: handleLocalforage,
-            serializer: {
-                deserialize: parse,
-                serialize: stringify,
-            },
+            storage: localStorage,
+            includePaths: ["themeName", "darkMode"],
+            overwrite: true,
         }
     }
 );

src/store/modules/userStore.ts

@@ -1,8 +1,6 @@
 import {defineStore} from 'pinia';
 import {ref} from 'vue';
 import {User} from "@/types/user";
-import {parse, stringify} from "zipson/lib";
-import {handleLocalforage} from "@/utils/localforage";
 
 
 export const useAuthStore = defineStore(
@@ -31,14 +29,11 @@ export const useAuthStore = defineStore(
     },
     {
         // 开启数据持久化
-        persist: {
+        persistedState: {
             key: 'user',
-            paths: ['user'],
-            storage: handleLocalforage,
-            serializer: {
-                deserialize: parse,
-                serialize: stringify,
-            },
+            storage: localStorage,
+            includePaths: ["user"],
+            overwrite: true,
         }
     }
 );

src/store/pinia.ts

@@ -0,0 +1,17 @@
+import {createPinia, Pinia} from "pinia";
+import {createPersistedStatePlugin} from "pinia-plugin-persistedstate-2";
+import stringify from 'json-stringify-safe';
+import {App} from "vue";
+
+const pinia: Pinia = createPinia();
+const installPersistedStatePlugin = createPersistedStatePlugin({
+    serialize: (value) => stringify(value),
+    deserialize: (value) => JSON.parse(value),
+});
+pinia.use((context) => installPersistedStatePlugin(context));
+
+export function setupStore(app: App<Element>) {
+    app.use(pinia);
+}
+
+export default pinia;