路由标签页缓存

package.json

@@ -44,6 +44,7 @@
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
+    "pinia-plugin-persist": "^1.0.0",
     "pubsub-js": "^1.9.4",
     "sortablejs": "^1.15.0",
     "typescript": "^5.0.4",

src/main.js

@@ -27,6 +27,8 @@ import "./permission"; // permission control
 import { useDict } from "@/utils/dict";
 
 import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from "@/utils/ruoyi";
+import { createPinia } from 'pinia'//引入pinia
+import piniaPluginPersist from 'pinia-plugin-persist'//引入pinia数据持久化插件
 
 import {
   dictKeyValue,
@@ -97,6 +99,7 @@ app.use(i18n);
 app.use(elementIcons);
 app.use(print);
 app.component("svg-icon", SvgIcon);
+app.use(createPinia().use(piniaPluginPersist))//安装插件
 
 directive(app);
 

src/store/modules/tagsView.js

@@ -1,190 +1,197 @@
-const useTagsViewStore = defineStore(
-  'tags-view',
-  {
-    state: () => ({
-      visitedViews: [],
-      cachedViews: [],
-      iframeViews: []
-    }),
-    actions: {
-      addView(view) {
-        this.addVisitedView(view)
-        this.addCachedView(view)
-      },
-      addIframeView(view) {
-        if (this.iframeViews.some(v => v.fullPath === view.fullPath)) return
-        let title = view.meta.title || 'no-name'
-        if(view.path == '/platform_manage/process/processApproval') {
-          title = view.query.processType == 10 ? '审批' : view.query.processType == 20 ? '查看' : '发起'
+const useTagsViewStore = defineStore("tags-view", {
+  state: () => ({
+    visitedViews: [],
+    cachedViews: [],
+    iframeViews: [],
+  }),
+  actions: {
+    addView(view) {
+      this.addVisitedView(view);
+      this.addCachedView(view);
+    },
+    addIframeView(view) {
+      if (this.iframeViews.some((v) => v.fullPath === view.fullPath)) return;
+      let title = view.meta.title || "no-name";
+      if (view.path == "/platform_manage/process/processApproval") {
+        title = view.query.processType == 10 ? "审批" : view.query.processType == 20 ? "查看" : "发起";
+      }
+      this.iframeViews.push(
+        Object.assign({}, view, {
+          title: title,
+        })
+      );
+    },
+    addVisitedView(view) {
+      if (this.visitedViews.some((v) => v.fullPath === view.fullPath)) return;
+      let title = view.meta.title || "no-name";
+      if (view.path == "/platform_manage/process/processApproval") {
+        title = view.query.processType == 10 ? "审批" : view.query.processType == 20 ? "查看" : "发起";
+      }
+      this.visitedViews.push(
+        Object.assign({}, view, {
+          title: title,
+        })
+      );
+    },
+    addCachedView(view) {
+      if (this.cachedViews.includes(view.name)) return;
+      if (!view.meta.noCache) {
+        this.cachedViews.push(view.name);
+      }
+    },
+    delView(view) {
+      return new Promise((resolve) => {
+        this.delVisitedView(view);
+        this.delCachedView(view);
+        resolve({
+          visitedViews: [...this.visitedViews],
+          cachedViews: [...this.cachedViews],
+        });
+      });
+    },
+    delVisitedView(view) {
+      return new Promise((resolve) => {
+        for (const [i, v] of this.visitedViews.entries()) {
+          if (v.fullPath === view.fullPath) {
+            this.visitedViews.splice(i, 1);
+            break;
+          }
         }
-        this.iframeViews.push(
-          Object.assign({}, view, {
-            title: title
-          })
-        )
-      },
-      addVisitedView(view) {
-        if (this.visitedViews.some(v => v.fullPath === view.fullPath)) return
-        let title = view.meta.title || 'no-name'
-        if(view.path == '/platform_manage/process/processApproval') {
-          title = view.query.processType == 10 ? '审批' : view.query.processType == 20 ? '查看' : '发起'
+        this.iframeViews = this.iframeViews.filter((item) => item.fullPath !== view.fullPath);
+        resolve([...this.visitedViews]);
+      });
+    },
+    delIframeView(view) {
+      return new Promise((resolve) => {
+        this.iframeViews = this.iframeViews.filter((item) => item.fullPath !== view.fullPath);
+        resolve([...this.iframeViews]);
+      });
+    },
+    delCachedView(view) {
+      return new Promise((resolve) => {
+        const index = this.cachedViews.indexOf(view.name);
+        index > -1 && this.cachedViews.splice(index, 1);
+        resolve([...this.cachedViews]);
+      });
+    },
+    delOthersViews(view) {
+      return new Promise((resolve) => {
+        this.delOthersVisitedViews(view);
+        this.delOthersCachedViews(view);
+        resolve({
+          visitedViews: [...this.visitedViews],
+          cachedViews: [...this.cachedViews],
+        });
+      });
+    },
+    delOthersVisitedViews(view) {
+      return new Promise((resolve) => {
+        this.visitedViews = this.visitedViews.filter((v) => {
+          return v.meta.affix || v.fullPath === view.fullPath;
+        });
+        this.iframeViews = this.iframeViews.filter((item) => item.fullPath === view.fullPath);
+        resolve([...this.visitedViews]);
+      });
+    },
+    delOthersCachedViews(view) {
+      return new Promise((resolve) => {
+        const index = this.cachedViews.indexOf(view.name);
+        if (index > -1) {
+          this.cachedViews = this.cachedViews.slice(index, index + 1);
+        } else {
+          this.cachedViews = [];
         }
-        this.visitedViews.push(
-          Object.assign({}, view, {
-            title: title
-          })
-        )
-      },
-      addCachedView(view) {
-        if (this.cachedViews.includes(view.name)) return
-        if (!view.meta.noCache) {
-          this.cachedViews.push(view.name)
+        resolve([...this.cachedViews]);
+      });
+    },
+    delAllViews(view) {
+      return new Promise((resolve) => {
+        this.delAllVisitedViews(view);
+        this.delAllCachedViews(view);
+        resolve({
+          visitedViews: [...this.visitedViews],
+          cachedViews: [...this.cachedViews],
+        });
+      });
+    },
+    delAllVisitedViews(view) {
+      return new Promise((resolve) => {
+        const affixTags = this.visitedViews.filter((tag) => tag.meta.affix);
+        this.visitedViews = affixTags;
+        this.iframeViews = [];
+        resolve([...this.visitedViews]);
+      });
+    },
+    delAllCachedViews(view) {
+      return new Promise((resolve) => {
+        this.cachedViews = [];
+        resolve([...this.cachedViews]);
+      });
+    },
+    updateVisitedView(view) {
+      for (let v of this.visitedViews) {
+        if (v.fullPath === view.fullPath) {
+          v = Object.assign(v, view);
+          break;
         }
-      },
-      delView(view) {
-        return new Promise(resolve => {
-          this.delVisitedView(view)
-          this.delCachedView(view)
-          resolve({
-            visitedViews: [...this.visitedViews],
-            cachedViews: [...this.cachedViews]
-          })
-        })
-      },
-      delVisitedView(view) {
-        return new Promise(resolve => {
-          for (const [i, v] of this.visitedViews.entries()) {
-            if (v.fullPath === view.fullPath) {
-              this.visitedViews.splice(i, 1)
-              break
-            }
+      }
+    },
+    delRightTags(view) {
+      return new Promise((resolve) => {
+        const index = this.visitedViews.findIndex((v) => v.fullPath === view.fullPath);
+        if (index === -1) {
+          return;
+        }
+        this.visitedViews = this.visitedViews.filter((item, idx) => {
+          if (idx <= index || (item.meta && item.meta.affix)) {
+            return true;
           }
-          this.iframeViews = this.iframeViews.filter(item => item.fullPath !== view.fullPath)
-          resolve([...this.visitedViews])
-        })
-      },
-      delIframeView(view) {
-        return new Promise(resolve => {
-          this.iframeViews = this.iframeViews.filter(item => item.fullPath !== view.fullPath)
-          resolve([...this.iframeViews])
-        })
-      },
-      delCachedView(view) {
-        return new Promise(resolve => {
-          const index = this.cachedViews.indexOf(view.name)
-          index > -1 && this.cachedViews.splice(index, 1)
-          resolve([...this.cachedViews])
-        })
-      },
-      delOthersViews(view) {
-        return new Promise(resolve => {
-          this.delOthersVisitedViews(view)
-          this.delOthersCachedViews(view)
-          resolve({
-            visitedViews: [...this.visitedViews],
-            cachedViews: [...this.cachedViews]
-          })
-        })
-      },
-      delOthersVisitedViews(view) {
-        return new Promise(resolve => {
-          this.visitedViews = this.visitedViews.filter(v => {
-            return v.meta.affix || v.fullPath === view.fullPath
-          })
-          this.iframeViews = this.iframeViews.filter(item => item.fullPath === view.fullPath)
-          resolve([...this.visitedViews])
-        })
-      },
-      delOthersCachedViews(view) {
-        return new Promise(resolve => {
-          const index = this.cachedViews.indexOf(view.name)
-          if (index > -1) {
-            this.cachedViews = this.cachedViews.slice(index, index + 1)
-          } else {
-            this.cachedViews = []
+          const i = this.cachedViews.indexOf(item.name);
+          if (i > -1) {
+            this.cachedViews.splice(i, 1);
           }
-          resolve([...this.cachedViews])
-        })
-      },
-      delAllViews(view) {
-        return new Promise(resolve => {
-          this.delAllVisitedViews(view)
-          this.delAllCachedViews(view)
-          resolve({
-            visitedViews: [...this.visitedViews],
-            cachedViews: [...this.cachedViews]
-          })
-        })
-      },
-      delAllVisitedViews(view) {
-        return new Promise(resolve => {
-          const affixTags = this.visitedViews.filter(tag => tag.meta.affix)
-          this.visitedViews = affixTags
-          this.iframeViews = []
-          resolve([...this.visitedViews])
-        })
-      },
-      delAllCachedViews(view) {
-        return new Promise(resolve => {
-          this.cachedViews = []
-          resolve([...this.cachedViews])
-        })
-      },
-      updateVisitedView(view) {
-        for (let v of this.visitedViews) {
-          if (v.fullPath === view.fullPath) {
-            v = Object.assign(v, view)
-            break
+          if (item.meta.link) {
+            const fi = this.iframeViews.findIndex((v) => v.fullPath === item.fullPath);
+            this.iframeViews.splice(fi, 1);
           }
+          return false;
+        });
+        resolve([...this.visitedViews]);
+      });
+    },
+    delLeftTags(view) {
+      return new Promise((resolve) => {
+        const index = this.visitedViews.findIndex((v) => v.fullPath === view.fullPath);
+        if (index === -1) {
+          return;
         }
-      },
-      delRightTags(view) {
-        return new Promise(resolve => {
-          const index = this.visitedViews.findIndex(v => v.fullPath === view.fullPath)
-          if (index === -1) {
-            return
+        this.visitedViews = this.visitedViews.filter((item, idx) => {
+          if (idx >= index || (item.meta && item.meta.affix)) {
+            return true;
           }
-          this.visitedViews = this.visitedViews.filter((item, idx) => {
-            if (idx <= index || (item.meta && item.meta.affix)) {
-              return true
-            }
-            const i = this.cachedViews.indexOf(item.name)
-            if (i > -1) {
-              this.cachedViews.splice(i, 1)
-            }
-            if(item.meta.link) {
-              const fi = this.iframeViews.findIndex(v => v.fullPath === item.fullPath)
-              this.iframeViews.splice(fi, 1)
-            }
-            return false
-          })
-          resolve([...this.visitedViews])
-        })
-      },
-      delLeftTags(view) {
-        return new Promise(resolve => {
-          const index = this.visitedViews.findIndex(v => v.fullPath === view.fullPath)
-          if (index === -1) {
-            return
+          const i = this.cachedViews.indexOf(item.name);
+          if (i > -1) {
+            this.cachedViews.splice(i, 1);
           }
-          this.visitedViews = this.visitedViews.filter((item, idx) => {
-            if (idx >= index || (item.meta && item.meta.affix)) {
-              return true
-            }
-            const i = this.cachedViews.indexOf(item.name)
-            if (i > -1) {
-              this.cachedViews.splice(i, 1)
-            }
-            if(item.meta.link) {
-              const fi = this.iframeViews.findIndex(v => v.fullPath === item.fullPath)
-              this.iframeViews.splice(fi, 1)
-            }
-            return false
-          })
-          resolve([...this.visitedViews])
-        })
-      }
-    }
-  })
+          if (item.meta.link) {
+            const fi = this.iframeViews.findIndex((v) => v.fullPath === item.fullPath);
+            this.iframeViews.splice(fi, 1);
+          }
+          return false;
+        });
+        resolve([...this.visitedViews]);
+      });
+    },
+  },
+  persist: {
+    enabled: true, //开启数据持久化
+    strategies: [
+      {
+        key: "tags-view", //给一个要保存的名称
+        storage: localStorage, //sessionStorage / localStorage 存储方式
+      },
+    ],
+  },
+});
 
-export default useTagsViewStore
+export default useTagsViewStore;