存放在pinia中的数据，页面一刷新，数据就会丢失怎么解决？存放在pinia中的数据，页面一刷新，数据就会丢失怎么解决？

利用本地存储，将数据存放到浏览器，或者服务器内

// 存储数据到 localStorage
localStorage.setItem('myData', JSON.stringify(myData));

// 从 localStorage 获取数据
const data = JSON.parse(localStorage.getItem('myData'));

// 存储数据到 sessionStorage
sessionStorage.setItem('myData', JSON.stringify(myData));

// 从 sessionStorage 获取数据
const data = JSON.parse(sessionStorage.getItem('myData'));

利用插件实现自动化存储

使用pinia插件

安装插件

//在控制台执行如下代码：
 npm i pinia-plugin-persist

在配置文件中引入并使用插件

import { createPinia } from 'pinia'
// 引入插件
import piniaPersist from 'pinia-plugin-persist'

// 创建 pinia 实例
const pinia = createPinia()
// 使用插件
pinia.use(piniaPersist)

// 默认导出，给 main.js 使用
export default pinia

// 模块统一导出
export * from './modules/user'

开启自动存储

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore(
  'user',
  () => {
    let userId = ref() // 用户唯一标识
    let useravatar = ref() // 用户头像
    let nickName = ref() // 用户昵称

    return { userId, useravatar, nickName }
  },
  {
    persist: {
      enabled: true, //Store中数据持久化生效
      // 将数据进行持久化存储
      // strategies: [
      //   {
      //     key: 'userId',
      //     storage: localStorage, //可以选择对应的存储形式（localStorage或者sessionStroage）
      //   },
      //   {
      //     key: 'nickName',
      //     storage: localStorage, //可以选择对应的存储形式（localStorage或者sessionStroage）
      //   },
      // ],
    },
  }
)

说明：这里说一下我pinia仓库的代码结构

下面是index文件的内容(将模块统一导出)

import { createPinia } from 'pinia'
// 引入插件
import piniaPersist from 'pinia-plugin-persist'

// 创建 pinia 实例
const pinia = createPinia()
// 使用插件
pinia.use(piniaPersist)

// 默认导出，给 main.js 使用
export default pinia

// 模块统一导出
export * from './modules/user'