feat: vuex数据持久化

README.md

@@ -31,6 +31,8 @@
     > 编译时自动注入全局样式和变量
 -   remove-console
     > 打包时自动移除 console 语句
+-   vuex-persistedstate
+    > vuex 数据持久化
 -   legacy
     > 浏览器兼容处理
 -   eslint

src/router/index.js

@@ -1,4 +1,8 @@
+import config from '@/configs';
+import store from '@/store';
 import { createRouter, createWebHistory } from 'vue-router';
+// 示例模块
+import demoModule from './demo';
 
 // 全局路由
 export const globalRoutes = [
@@ -20,8 +24,6 @@ export const globalRoutes = [
     },
 ];
 
-// 示例模块
-import demoModule from './demo';
 export const demoRoutes = import.meta.env.MODE === 'development' ? demoModule : [];
 
 // 动态模块
@@ -68,21 +70,15 @@ export const routes = [
     },
 ];
 
-import config from '@/configs';
-
 const router = createRouter({
     history: createWebHistory(),
     routes: config.useLocalRouter ? routes : globalRoutes,
 });
 
-import store from '@/store';
 router.onError((error, to) => {
     console.info('[router] error', error, to);
 });
 router.beforeEach(async (to, from, next) => {
-    if (!from.matched.length) {
-        store.loadCache();
-    }
     if (store.state.local.token) {
         if (!store.state.auth.permission.length) {
             if (config.useLocalRouter) {

src/store/index.js

@@ -1,4 +1,5 @@
 import { createStore } from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
 
 const modules = Object.fromEntries(
     Object.entries(import.meta.globEager('./**/*.js')).map((entry) => {
@@ -17,37 +18,12 @@ const modules = Object.fromEntries(
 const store = createStore({
     strict: process.env.NODE_ENV !== 'production',
     modules,
+    plugins: [
+        // 所有模块都不持久化到sessionStorage
+        createPersistedState({ key: 'store-cache', paths: [], storage: window.sessionStorage }),
+        // local模块持久化到localStorage
+        createPersistedState({ key: 'store-cache', paths: ['local'], storage: window.localStorage }),
+    ],
 });
 
-const storeCache = () => {
-    localStorage.setItem('storeCache', JSON.stringify(store.state.local));
-    // sessionStorage.setItem('storeCache', JSON.stringify(store.state));
-    console.info('[store] store cache');
-};
-const loadCache = () => {
-    let storeCache = sessionStorage.getItem('storeCache');
-    if (storeCache) {
-        let init = _.cloneDeep(store.state);
-        storeCache = Object.assign(init, JSON.parse(storeCache));
-        sessionStorage.removeItem('storeCache');
-    } else {
-        storeCache = { ...store.state };
-    }
-    let localCache = localStorage.getItem('storeCache');
-    if (localCache) {
-        storeCache.local = _.cloneDeep(store.state.local);
-        Object.assign(storeCache.local, JSON.parse(localCache));
-    }
-    console.info('[store] load cache', storeCache);
-    store.replaceState(storeCache);
-};
-window._open = window.open;
-window.open = function () {
-    storeCache();
-    window._open.apply(window, arguments);
-};
-window.addEventListener('beforeunload', storeCache);
-store.storeCache = storeCache;
-store.loadCache = loadCache;
-
 export default store;