feat：多语言和持久化

package.json

@@ -12,6 +12,7 @@
     "@mdi/font": "7.0.96",
     "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "roboto-fontface": "*",
     "vue": "^3.4.0",
     "vue-i18n": "9",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       pinia:
         specifier: ^2.1.7
         version: 2.1.7(vue@3.4.25)
+      pinia-plugin-persistedstate:
+        specifier: ^3.2.1
+        version: 3.2.1(pinia@2.1.7(vue@3.4.25))
       roboto-fontface:
         specifier: '*'
         version: 0.10.0
@@ -928,6 +931,11 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  pinia-plugin-persistedstate@3.2.1:
+    resolution: {integrity: sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==}
+    peerDependencies:
+      pinia: ^2.0.0
+
   pinia@2.1.7:
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:
@@ -2117,6 +2125,10 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  pinia-plugin-persistedstate@3.2.1(pinia@2.1.7(vue@3.4.25)):
+    dependencies:
+      pinia: 2.1.7(vue@3.4.25)
+
   pinia@2.1.7(vue@3.4.25):
     dependencies:
       '@vue/devtools-api': 6.6.1

src/main.js

@@ -13,10 +13,14 @@ import { createApp } from 'vue'
 
 import { createPinia } from 'pinia'
 
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // pinia 持久化
+
 import router from './router'
 
 const pinia = createPinia()
 
+pinia.use(piniaPluginPersistedstate)
+
 const app = createApp(App)
 
 app.use(pinia)

src/store/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

src/store/index.js

@@ -1,12 +0,0 @@
-
-import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-
-const store = createPinia()
-store.use(piniaPluginPersistedstate)
-
-export const setupStore = app => {
-  app.use(store)
-}
-
-export { store }

src/store/locale.js

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { en, zhHans, zhHant } from 'vuetify/locale'
+import { reactive } from 'vue'
+
+const elLocaleMap = {
+  'zh-CN-Hant': zhHant,
+  'zh-CN': zhHans,
+  en: en
+}
+
+export const useLocaleStore = defineStore('locales',
+  () => {
+    const localeMap = [
+      {
+        lang: 'zh-CN',
+        name: '简体中文'
+      },
+      {
+        lang: 'zh-CN-Hant',
+        name: '繁体中文'
+      },
+      {
+        lang: 'en',
+        name: 'English'
+      }
+    ]
+    const currentLocale = reactive({
+      lang: 'zh-CN',
+      elLocale: elLocaleMap['zh-CN']
+    })
+    const setCurrentLocale = (localeMap) => {
+      // this.locale = Object.assign(this.locale, localeMap)
+      currentLocale.lang = localeMap.lang
+      currentLocale.elLocale = elLocaleMap[localeMap.lang]
+    }
+    return {
+      localeMap,
+      currentLocale,
+      setCurrentLocale
+    }
+  },
+  {
+    persist: true, // ref() 持久化响应
+  }
+)
+

src/store/modules/locale.js

@@ -1,60 +0,0 @@
-import { defineStore } from 'pinia'
-import { store } from '../index'
-import { en, zhHans, zhHant } from 'vuetify/locale'
-import { getLang, setLang } from '@/utils/catch'
-// import zhCn from 'element-plus/es/locale/lang/zh-cn'
-// import en from 'element-plus/es/locale/lang/en'
-// import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-
-// const { wsCache } = useCache()
-
-const elLocaleMap = {
-  'zh-CN-Hant': zhHant,
-  'zh-CN': zhHans,
-  en: en
-}
-export const useLocaleStore = defineStore('locales', {
-  state: () => {
-    return {
-      currentLocale: {
-        lang: getLang() || 'zh-CN',
-        elLocale: elLocaleMap[getLang() || 'zh-CN']
-      },
-      // 多语言
-      localeMap: [
-        {
-          lang: 'zh-CN',
-          name: '简体中文'
-        },
-        {
-          lang: 'zh-CN-Hant',
-          name: '繁体中文'
-        },
-        {
-          lang: 'en',
-          name: 'English'
-        }
-      ]
-    }
-  },
-  getters: {
-    getCurrentLocale() {
-      return this.currentLocale
-    },
-    getLocaleMap() {
-      return this.localeMap
-    }
-  },
-  actions: {
-    setCurrentLocale(localeMap) {
-      // this.locale = Object.assign(this.locale, localeMap)
-      this.currentLocale.lang = localeMap?.lang
-      this.currentLocale.elLocale = elLocaleMap[localeMap?.lang]
-      setLang(localeMap?.lang)
-    }
-  }
-})
-
-export const useLocaleStoreWithOut = () => {
-  return useLocaleStore(store)
-}

src/utils/cache.js

@@ -1,8 +0,0 @@
-
-export const getLang = () => {
-  return localStorage.getItem('lang')
-}
-
-export const setLang = (value) => {
-  return localStorage.setItem('lang', value)
-}