feat: add Pinia persist store example

Author: cwandev

app/composables/counter.ts

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

app/locales/en-US.json

@@ -4,7 +4,8 @@
     "language": "📚 Language",
     "404Demo": "🙅 Page 404 Demo",
     "unocssExample": "🎨 Unocss example",
-    "keepAlive": "🧡 KeepAlive Demo"
+    "keepAlive": "🧡 KeepAlive Demo",
+    "persistPiniaState": "💾 Persist Pinia State"
   },
   "tabbar": {
     "home": "Home",
@@ -24,5 +25,10 @@
   },
   "keepalive_page": {
     "label": "The current component will be cached"
+  },
+  "counter_page": {
+    "label": "This is a simple example of persisting Pinia state. To verify its effectiveness, you can refresh the interface and observe it.",
+    "label_num": "Number",
+    "btn_add": "Add"
   }
 }

app/locales/zh-CN.json

@@ -4,7 +4,8 @@
     "language": "📚 语言",
     "404Demo": "🙅 404页 演示",
     "unocssExample": "🎨 Unocss 示例",
-    "keepAlive": "🧡 KeepAlive 演示"
+    "keepAlive": "🧡 KeepAlive 演示",
+    "persistPiniaState": "💾 持久化 Pinia 状态"
   },
   "tabbar": {
     "home": "主页",
@@ -24,5 +25,10 @@
   },
   "keepalive_page": {
     "label": "当前组件将会被缓存"
+  },
+  "counter_page": {
+    "label": "这是一个简单的持久化 Pinia 状态的例子。为了验证其有效性，你可以刷新界面并观察它。",
+    "label_num": "数字",
+    "btn_add": "增加"
   }
 }

app/pages/counter/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import useCounter from '~/composables/counter'
+
+definePageMeta({
+  title: '🍍 持久化 Pinia 状态',
+  i18n: 'menu.persistPiniaState',
+})
+
+const counter = useCounter()
+
+function add() {
+  counter.increment()
+}
+</script>
+
+<template>
+  <div>
+    <h1 class="text-6xl color-pink font-semibold">
+      Hello, Pinia!
+    </h1>
+
+    <p class="mt-10 text-gray-700 dark:text-white">
+      {{ $t('counter_page.label') }}
+    </p>
+
+    <p class="mt-10">
+      {{ $t('counter_page.label_num') }}:
+      <strong class="text-green-500"> {{ counter.count }} </strong>
+    </p>
+
+    <button class="mt-10 btn" @click="add">
+      {{ $t('counter_page.btn_add') }}
+    </button>
+  </div>
+</template>

app/pages/index.vue

@@ -37,6 +37,7 @@ const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
 const menus = computed(() => [
   { title: t('menu.unocssExample'), route: 'unocss' },
   { title: t('menu.keepAlive'), route: 'keepalive' },
+  { title: t('menu.persistPiniaState'), route: 'counter' },
   { title: t('menu.404Demo'), route: 'unknown' },
 ])
 

nuxt.config.ts

@@ -9,6 +9,7 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
     '@nuxtjs/i18n',
     '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt',
   ],
 
   experimental: {

package.json

@@ -17,6 +17,7 @@
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/i18n": "^8.5.5",
     "nuxt": "^3.13.2",
+    "pinia-plugin-persistedstate": "^4.0.2",
     "vue": "^3.5.8",
     "vue-router": "^4.4.5"
   },
@@ -45,6 +46,14 @@
       "allowedVersions": {
         "meow": "^12.x"
       }
+    },
+    "allowedDeprecatedVersions": {
+      "glob": "*",
+      "are-we-there-yet": "2",
+      "gauge": "3",
+      "inflight": "1",
+      "npmlog": "5",
+      "rimraf": "3"
     }
   },
   "simple-git-hooks": {