feat: Add persist option to useCounterStore

package.json

@@ -27,7 +27,7 @@
     "nprogress": "^0.2.0",
     "page-stack-vue3": "^2.5.6",
     "pinia": "^2.2.2",
-    "pinia-plugin-persistedstate": "^3.2.3",
+    "pinia-plugin-persistedstate": "^4.0.1",
     "radash": "^12.1.0",
     "tdesign-icons-vue-next": "^0.2.6",
     "tdesign-mobile-vue": "^1.4.1",
@@ -67,7 +67,7 @@
     "lint-staged": "^15.2.10",
     "npm-run-all2": "^6.2.2",
     "prettier": "^3.3.3",
-    "typescript": "~5.5.4",
+    "typescript": "~5.6.2",
     "unocss": "^0.62.3",
     "unplugin-auto-import": "^0.18.2",
     "unplugin-icons": "^0.19.3",
@@ -81,11 +81,7 @@
     "vitest": "^2.0.5",
     "vue-tsc": "^2.1.6"
   },
-  "pnpm": {
-    "patchedDependencies": {
-      "vue-router@4.4.3": "patches/vue-router@4.4.3.patch"
-    }
-  },
+  "pnpm": {},
   "lint-staged": {
     "src/**/*.{js,ts,vue}": [
       "prettier --write",

src/main.ts

@@ -1,13 +1,13 @@
 import './assets/main.css';
+
 import 'virtual:uno.css';
 
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
 import { createHead } from '@unhead/vue';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import App from './App.vue';
 import { router } from './router';
-import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 
 async function init() {
   if (import.meta.env.MODE === 'development' || 1 === 1) {
@@ -25,7 +25,7 @@ async function init() {
 
   const app = createApp(App)
     .use(createHead())
-    .use(createPinia())
+    .use(createPinia().use(piniaPluginPersistedstate))
     // Register the plugin before the router
     .use(DataLoaderPlugin, { router })
     // adding the router will trigger the initial navigation

src/stores/counter.ts

@@ -1,12 +1,18 @@
 import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0);
-  const doubleCount = computed(() => count.value * 2);
-  function increment() {
-    count.value++;
-  }
+export const useCounterStore = defineStore(
+  'counter',
+  () => {
+    const count = ref(0);
+    const doubleCount = computed(() => count.value * 2);
+    function increment() {
+      count.value++;
+    }
 
-  return { count, doubleCount, increment };
-});
+    return { count, doubleCount, increment };
+  },
+  {
+    persist: true,
+  },
+);