feat: Added persistent Pinia state demo

Author: cwandev

src/stores/modules/counter.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+
+const useCounterStore = defineStore('counter', () => {
+  const counter = ref(0)
+
+  const increment = () => {
+    counter.value++
+  }
+
+  return {
+    counter,
+    increment,
+  }
+}, {
+  persist: true,
+})
+
+export default useCounterStore

src/typed-router.d.ts

@@ -41,6 +41,7 @@ declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     'index': RouteRecordInfo<'index', '/', Record<never, never>, Record<never, never>>,
     'charts': RouteRecordInfo<'charts', '/charts', Record<never, never>, Record<never, never>>,
+    'counter': RouteRecordInfo<'counter', '/counter', Record<never, never>, Record<never, never>>,
     'mock': RouteRecordInfo<'mock', '/mock', Record<never, never>, Record<never, never>>,
     'unocss': RouteRecordInfo<'unocss', '/unocss', Record<never, never>, Record<never, never>>,
   }

src/views/counter/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import useCounterStore from '@/stores/modules/counter'
+
+definePage({
+  name: 'counter',
+  meta: {
+    level: 2,
+  },
+})
+
+const counterStore = useCounterStore()
+const { counter } = storeToRefs(counterStore)
+
+function add() {
+  counterStore.increment()
+}
+
+// back
+const onClickLeft = () => history.back()
+</script>
+
+<template>
+  <div>
+    <VanNavBar title="🍍 持久化 Pinia 状态" left-arrow fixed @click-left="onClickLeft" />
+
+    <div class="h-100vh w-full px-20 py-60">
+      <h1 class="text-6xl color-pink font-semibold">
+        Hello, Pinia!
+      </h1>
+      <p class="mt-4 text-gray-700 dark:text-white">
+        This is a simple example of persisting Pinia state.
+        To verify its effectiveness, you can refresh the interface and observe it.
+      </p>
+      <p class="mt-4">
+        number：<strong class="text-green-500"> {{ counter }} </strong>
+      </p>
+      <button class="btn border-none btn-green" @click="add">
+        Add
+      </button>
+    </div>
+  </div>
+</template>

src/views/index.vue

@@ -24,6 +24,8 @@ const checked = ref<boolean>(false)
 
       <VanCell title="🪶 Unocss 示例" to="unocss" is-link />
 
+      <VanCell title="🍍 持久化 Pinia 状态" to="counter" is-link />
+
       <VanCell center>
         <template #title>
           <span class="custom-title">🎨 欢迎补充</span>