1.下载依赖
pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate
2.在main.ts引入
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 数据持久化--pinia中使用到
import persist from 'pinia-plugin-persistedstate'

  import App from './App.vue'
  import router from './router'

  import 'virtual:svg-icons-register'
  // 样式全局使用【vant样式】
  import 'vant/lib/index.css'
  // 初始化样式
  import '@/styles/main.scss'

  const app = createApp(App)
  const pinia = createPinia()

  app.use(pinia)
  pinia.use(persist)

  app.use(router)
  app.mount('#app')

3.使用pinia
import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { User } from '@/types/user'

export const useUserStore = defineStore(
'cp-user',
() => {
// 用户信息
const user = ref<User>()

// 保存用户信息
const setUser = (u: User) => {
  user.value = u
}

// 删除用户信息
const delUser = () => {
  user.value = undefined
}

return { user, setUser, delUser }

},
// 数据持久化 -- 单独下载依赖包后在main.ts配置后可以直接使用
// 开启数据持久化
{ persist: true }
)