feat: pinia中使用pinia-plugin-persistedstate实现持久化存储

package.json

@@ -42,6 +42,7 @@
         "nprogress": "^0.2.0",
         "path": "^0.12.7",
         "pinia": "^2.2.2",
+        "pinia-plugin-persistedstate": "^4.2.0",
         "pinyin-pro": "^3.24.2",
         "qs": "^6.13.0",
         "responsive-storage": "^2.2.0",

src/store/index.ts

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

src/store/modules/test.ts

@@ -0,0 +1,38 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+/**
+ * 测试pinia中使用pinia-plugin-persistedstate库实现持久化存储
+ * 文档地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
+ * pinia中defineStore有两种写法，当前test采用的setup syntax（option syntax请参考其他store）
+ *
+ * 使用方法：
+ * 1. 安装pinia-plugin-persistedstate库：pnpm add pinia-plugin-persistedstate
+ * 2. 在store/index.ts中引入pinia-plugin-persistedstate库：
+ *    import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate';
+ * 3. 使用插件
+ *    const store = createPinia();
+ *    store.use(piniaPluginPersistedstate);
+ * 4. 在store/modules/test.ts中使用defineStore创建store，并配置persist选项，key为my-test，storage为window.sessionStorage
+ * 5. 需要在整个项目中使用一次，才能在sessionStorage看到对应的存储数据，如果想要初始化就有可以在app.vue中调用，本示例在welcome页面调用（如果不调用，data中的count值不会被持久化，且不存在pinia的内存中）
+ */
+export default defineStore(
+    'test',
+    () => {
+        const count = ref(0);
+        const updateCount = () => {
+            count.value++;
+        };
+        return {
+            count,
+            updateCount,
+        };
+    },
+    {
+        persist: {
+            key: 'my-test',
+            // 使用sessionStorage存储数据，默认为localStorage
+            storage: window.sessionStorage,
+        },
+    }
+);

src/views/welcome/index.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import useTestStore from '@/store/modules/test';
+
+const testStore = useTestStore();
+
+testStore.updateCount();
 defineOptions({
     name: 'Welcome',
 });