feat: add pinia persist plugin (#3173)

package.json

@@ -90,6 +90,7 @@
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
     "pinia": "2.1.4",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",

pnpm-lock.yaml

@@ -77,6 +77,9 @@ importers:
       pinia:
         specifier: 2.1.4
         version: 2.1.4(typescript@5.1.6)(vue@3.3.4)
+      pinia-plugin-persistedstate:
+        specifier: ^3.2.0
+        version: 3.2.0(pinia@2.1.4)
       print-js:
         specifier: ^1.6.0
         version: 1.6.0
@@ -9075,6 +9078,14 @@ packages:
     requiresBuild: true
     optional: true
 
+  /pinia-plugin-persistedstate@3.2.0(pinia@2.1.4):
+    resolution: {integrity: sha512-tZbNGf2vjAQcIm7alK40sE51Qu/m9oWr+rEgNm/2AWr1huFxj72CjvpQcIQzMknDBJEkQznCLAGtJTIcLKrKdw==}
+    peerDependencies:
+      pinia: ^2.0.0
+    dependencies:
+      pinia: 2.1.4(typescript@5.1.6)(vue@3.3.4)
+    dev: false
+
   /pinia@2.1.4(typescript@5.1.6)(vue@3.3.4):
     resolution: {integrity: sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==}
     peerDependencies:

src/store/index.ts

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

src/store/plugin/persist.ts

@@ -0,0 +1,38 @@
+/**
+ * Pinia Persist Plugin
+ * Pinia 持久化插件
+ * @link https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
+ *
+ */
+import type { Pinia } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
+import type { PersistedStateFactoryOptions } from 'pinia-plugin-persistedstate';
+import { getCommonStoragePrefix } from '@/utils/env';
+
+export const PERSIST_KEY_PREFIX = getCommonStoragePrefix();
+
+// TODO customSerializer
+
+/**
+ * Register Pinia Persist Plugin
+ * 注册 Pinia 持久化插件
+ *
+ * @param pinia Pinia instance Pinia 实例
+ */
+export function registerPiniaPersistPlugin(pinia: Pinia) {
+  pinia.use(createPersistedState(createPersistedStateOptions(PERSIST_KEY_PREFIX)));
+}
+
+/**
+ * Create Persisted State Options
+ * 创建持久化状态选项
+ *
+ * @param keyPrefix prefix for storage key 储存键前缀
+ * @returns persisted state factory options
+ */
+export function createPersistedStateOptions(keyPrefix: string): PersistedStateFactoryOptions {
+  return {
+    storage: localStorage,
+    key: (id) => `${keyPrefix}__${id}`,
+  };
+}