【优化】优化本地缓存 刷新后保留状态

mes-ui/mes-ui-admin-vue3/package.json

@@ -56,6 +56,7 @@
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persist": "^1.0.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "sortablejs": "^1.15.0",
@@ -86,8 +87,8 @@
     "@types/sortablejs": "^1.15.5",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
-    "@unocss/transformer-variant-group": "^0.57.4",
     "@unocss/eslint-config": "^0.57.4",
+    "@unocss/transformer-variant-group": "^0.57.4",
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-vue": "^4.4.1",
     "@vitejs/plugin-vue-jsx": "^3.0.2",

mes-ui/mes-ui-admin-vue3/src/store/index.ts

@@ -1,7 +1,9 @@
 import type { App } from 'vue'
 import { createPinia } from 'pinia'
+import piniaPersist from 'pinia-plugin-persist'
 
 const store = createPinia()
+store.use(piniaPersist)
 
 export const setupStore = (app: App<Element>) => {
   app.use(store)

mes-ui/mes-ui-admin-vue3/src/store/modules/common.ts

@@ -6,24 +6,42 @@ export interface CommonStoreState {
   showWarning: boolean;
 }
 
-export const useCommonStore = defineStore('commonStore', () => {
+export const useCommonStore = defineStore(
-  const storeMap = ref({})
+  'commonStore',
-  const showWarning = ref(true); 
+  {
-  const getStore = (key) => {
+    state: (): CommonStoreState => {
-    return key === 'showWarning' ? showWarning.value : storeMap.value[key];
+      return {
-    return storeMap.value[key]
+        storeMap: {},
-  }
+        showWarning: true
-  const setStore = (key, value) => {
+      }
-    if (key === 'showWarning') {
+    },
-      showWarning.value = value;
+    actions: {
-    } else {
+      setStore(key: String, value: any) {
-      storeMap.value[key] = value;
+        if(key == 'showWarning'){
+          this.showWarning = value;
+        }else{
+          this.storeMap[key] = value;
+        }
+      },
+      getStore(key: string){
+        if(key == 'showWarning'){
+          return this.showWarning;
+        }else{
+          return this.storeMap[key];
+        }
+      }
+    },
+    persist: {
+      enabled: true,
+      strategies: [
+        {
+          key: "commonStore",
+          storage: localStorage
+        }
+      ]
     }
-    return storeMap.value[key] = value
   }
-
+)
-  return {getStore, setStore,showWarning}
-})
 
 export const useCommonStateWithOut = () => {
   return useCommonStore(store)

mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/detail.vue

@@ -197,18 +197,18 @@
 <script setup lang="ts">
 import {DICT_TYPE, getDictLabel, getStrDictOptions} from "@/utils/dict";
 import {dateFormatter, formatDate} from "@/utils/formatTime";
-import {useCommonStateWithOut} from "@/store/modules/common";
 import {ref} from "vue";
 import * as ProcessDesignApi from "@/api/heli/processdesign";
 import { inject } from 'vue'
 import {useUserStore} from "@/store/modules/user";
+import {useCommonStore} from "@/store/modules/common";
 
 defineOptions({ name: 'ProcessDesignDetail' })
 
 const reload = inject('reload')
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const commonStore = useCommonStateWithOut()
+const commonStore = useCommonStore()
 const userStore = useUserStore()
 const router = useRouter()
 
@@ -313,6 +313,7 @@ const goback = () => {
 }
 
 onMounted(() => {
+  console.log(commonStore.getStore("active"))
   dialogTitle.value = t('action.' + active.value)
   if ('detail' == active.value) {
     detailDisabled.value = true

mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/index.vue

@@ -139,14 +139,14 @@ import {getStrDictOptions, DICT_TYPE, getDictLabel, getIntDictOptions} from '@/u
 import {dateFormatter, formatDate} from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ProcessDesignApi from '@/api/heli/processdesign'
-import {useCommonStateWithOut} from "@/store/modules/common";
+import {useCommonStore} from "@/store/modules/common";
 
 defineOptions({ name: 'ProcessDesign' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const router = useRouter()
-const commonStore = useCommonStateWithOut()
+const commonStore = useCommonStore()
 
 const loading = ref(true) // 列表的加载中
 const list = ref([]) // 列表的数据