如何使用Vue3的Pinia库来实现年龄数据的本地持久存储？初始页面加载时，年龄默认为20岁。用户点击'年龄+'按钮，年龄应递增1。即使刷新浏览器，也能保持上次修改的年龄值，请提供详细完整的代码和设置步骤。

要在Vue3项目中使用Pinia库实现年龄数据的本地持久存储，首先确保已经安装了`pinia`和`vue-persistedstate`。安装这两个库：

npm install pinia vue-persistedstate
# 或者
yarn add pinia vue-persistedstate

接下来，按照以下步骤创建Pinia store、数据结构和生命周期钩子：

1. 创建一个名为`store.js`的文件，用于存放Pinia store：

import { defineStore } from 'pinia';
import { persist } from 'vue-persistedstate';

export const useAgeStore = defineStore('ageStore', {
  state: () => ({
    age: 20,
  }),
  actions: {
    incrementAge() {
      this.age++;
    },
  },
});

// 初始化时从本地读取年龄
useAgeStore().setup(() => {
  const persistedState = localStorage.getItem('age');
  if (persistedState) {
    this.age = parseInt(persistedState);
  }
});

2. 在`App.vue`或其他适当的地方，使用Pinia store：

<script setup>
import { useAgeStore } from './store/store.js';

const ageStore = useAgeStore();

onMounted(() => {
  // 当组件挂载时，检查是否有已保存的年龄并更新
  ageStore.$watch(() => ageStore.age, () => {
    localStorage.setItem('age', ageStore.age.toString());
  });
});
</script>

<button @click="ageStore.incrementAge">年龄+</button>
<p>{{ ageStore.age }} 岁</p>

当你点击“年龄+”按钮时，`incrementAge`方法会增加年龄，同时更新本地存储。首次加载时，如果存在已保存的年龄，它将显示在页面上。