1、原因分析

Pinia 的数据默认存储在内存中，浏览器刷新会重新加载页面，导致内存中的数据被重置 。

2、解决办法(主要介绍使用三方库的方法)

1. 使用浏览器的本地存储（localStorage 或 sessionStorage）进行数据持久化
2. 使用第三方库进行状态管理持久化。使用 pinia-plugin-persistedstate 库，安装后可以很方便地实现数据持久化。

• 安装并在sotre使用插件

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

export default pinia;

• 在需要持久化的store中添加persist

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name:'John',
    age:30
  }),
  persist: true, // 整个状态都进行持久化
  // 或者
  // persist: {
  //   key: 'counter-store',
  //   paths: ['count'], // 只持久化 count 属性
  // },
});

• 在使用 pinia-plugin-persistedstate 库时，persist 选项中的 key 和 paths 的含义如下：

key：用于指定在持久化存储（如 localStorage）中的唯一键名。当存储状态到本地存储时，这个键将用来标识存储的数据。不同的存储模块可以有不同的 key 值，以便区分存储的数据。

示例：如果设置为 'counter-store'，那么在 localStorage 中存储的数据将以这个键进行存储，以便下次页面加载时可以通过这个键来获取存储的数据。     

paths：用途：是一个数组，用于指定要持久化的具体状态属性路径。如果只希望持久化存储模块中的某些特定属性，而不是整个状态，可以使用这个选项。

示例：如果存储模块的状态有 { name: 'John', age: 30 }，设置 paths: ['name']，那么只有 name 属性会被持久化存储，刷新页面后只有 name 属性的值会被恢复，而 age 属性的值不会被持久化。