feat(持久化): 使用插件将store数据持久化（除 permission） (#291)

* feat: 通知支持持久化

* feat: setting支持持久化

* feat: tabs-router支持持久化

* feat: user支持持久化
fix: 修复 user 和 permission 未正确初始化的问题

* feat: 使用持久化插件将store持久化

#278

* feat: rebase

* feat: rebase

* feat: rebase

* Update src/store/modules/setting.ts

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

* Update src/store/index.ts

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

* Update src/layouts/setting.vue

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

package.json

@@ -24,6 +24,7 @@
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.11",
+    "pinia-plugin-persistedstate": "^2.1.1",
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",

src/App.vue

@@ -2,8 +2,7 @@
   <router-view :class="[mode]" />
 </template>
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import config from '@/config/style';
+import { computed } from 'vue';
 import { useSettingStore } from '@/store';
 
 const store = useSettingStore();
@@ -11,10 +10,6 @@ const store = useSettingStore();
 const mode = computed(() => {
   return store.displayMode;
 });
-
-onMounted(() => {
-  store.updateConfig({ ...config });
-});
 </script>
 <style lang="less" scoped>
 @import '@/style/variables.less';

src/layouts/index.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch, onBeforeUnmount } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { useSettingStore, useTabsRouterStore } from '@/store';
@@ -59,28 +59,10 @@ const appendNewRoute = () => {
   tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true });
 };
 
-const getTabRouterListCache = () => {
-  tabsRouterStore.initTabRouterList(JSON.parse(localStorage.getItem('tabRouterList')));
-};
-const setTabRouterListCache = () => {
-  const { tabRouters } = tabsRouterStore;
-  localStorage.setItem('tabRouterList', JSON.stringify(tabRouters));
-};
-
 onMounted(() => {
   appendNewRoute();
 });
 
-// 如果不需要持久化标签页可以注释掉以下的 onMounted 和 onBeforeUnmount 的内容
-onMounted(() => {
-  if (localStorage.getItem('tabRouterList')) getTabRouterListCache();
-  window.addEventListener('beforeunload', setTabRouterListCache);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', setTabRouterListCache);
-});
-
 watch(
   () => route.path,
   () => {

src/layouts/setting.vue

@@ -124,8 +124,18 @@ const MODE_OPTIONS = [
   { type: 'dark', text: '暗黑' },
   { type: 'auto', text: '跟随系统' },
 ];
+const initStyleConfig = () => {
+  const styleConfig = STYLE_CONFIG;
+  for (const key in styleConfig) {
+    if (Object.prototype.hasOwnProperty.call(styleConfig, key)) {
+      styleConfig[key] = settingStore[key];
+    }
+  }
 
-const formData = ref({ ...STYLE_CONFIG });
+  return styleConfig;
+};
+
+const formData = ref({ ...initStyleConfig() });
 const isColoPickerDisplay = ref(false);
 
 const showSettingPanel = computed({

src/permission.ts

@@ -5,16 +5,15 @@ import 'nprogress/nprogress.css'; // progress bar style
 import { getPermissionStore, getUserStore } from '@/store';
 import router from '@/router';
 
-const permissionStore = getPermissionStore();
-const userStore = getUserStore();
-
 NProgress.configure({ showSpinner: false });
 
-const { whiteListRouters } = permissionStore;
-
 router.beforeEach(async (to, from, next) => {
   NProgress.start();
 
+  const userStore = getUserStore();
+  const permissionStore = getPermissionStore();
+  const { whiteListRouters } = permissionStore;
+
   const { token } = userStore;
   if (token) {
     if (to.path === '/login') {
@@ -58,6 +57,9 @@ router.beforeEach(async (to, from, next) => {
 
 router.afterEach((to) => {
   if (to.path === '/login') {
+    const userStore = getUserStore();
+    const permissionStore = getPermissionStore();
+
     userStore.logout();
     permissionStore.restore();
   }

src/store/index.ts

@@ -1,6 +1,8 @@
 import { createPinia } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
 
 const store = createPinia();
+store.use(createPersistedState());
 
 export { store };
 

src/store/modules/notification.ts

@@ -73,4 +73,5 @@ export const useNotificationStore = defineStore('notification', {
       this.msgData = data;
     },
   },
+  persist: true,
 });

src/store/modules/setting.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import keys from 'lodash/keys';
 import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color';
 import STYLE_CONFIG from '@/config/style';
 import { store } from '@/store';
@@ -67,6 +68,9 @@ export const useSettingStore = defineStore('setting', {
       }
     },
   },
+  persist: {
+    paths: [...keys(STYLE_CONFIG), 'colorList', 'chartColors'],
+  },
 });
 
 export function getSettingStore() {

src/store/modules/tabs-router.ts

@@ -68,6 +68,7 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
       newRoutes?.forEach((route: TRouterInfo) => this.appendTabRouterList(route));
     },
   },
+  persist: true,
 });
 
 export function getTabsRouterStore() {

src/store/modules/user.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { TOKEN_NAME } from '@/config/global';
-import { store } from '@/store';
+import { store, usePermissionStore } from '@/store';
 
 const InitUserInfo = {
   roles: [],
@@ -79,6 +79,12 @@ export const useUserStore = defineStore('user', {
       this.token = '';
     },
   },
+  persist: {
+    afterRestore: (ctx) => {
+      const permissionStore = usePermissionStore();
+      permissionStore.initRoutes(ctx.store.roles);
+    },
+  },
 });
 
 export function getUserStore() {