1.本地持久化的原因：

Pinia 本身是一个纯内存状态管理库，页面刷新后所有 store 会归零。这会导致之前存储的数据消失，并且需要重新存储到Pinia中。

2.使用步骤

2.1 安装插件：在终端中，安装插件到项目

//使用 npm
npm install pinia-plugin-persistedstate
 
// 使用 yarn
yarn add pinia-plugin-persistedstate

2.2 全局注册：在入口文件main.js/main.ts中注册

import { createApp } from 'vue'
import { createPinia } from 'pinia' // 导入pinia库
import persist from 'pinia-plugin-persistedstate'' // 导入pinia插件
import App from './App.vue'


const pinia = createPinia()
pinia.use(persist) // 全局注册插件

const app = createApp(App)
app.use(pinia) // 全局注册pinia库

app.mount('#app')

2.3 在pinia中使用：

插件会自动获取数据，页面加载时自动 localStorage.getItem()，并且之后每次 loginUser 变动，再自动 setItem 写回去。

2.3.1 组合式写法

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 组合式写法
export const useUserStore = defineStore(
  'user',
  () => {
    const token = ref('')
    const profile = ref<UserProfile>()
    return { token, profile }
  },
  {
    persist: true,          // 默认 key=user, storage=localStorage, 持久化整个 state
  }
)

2.3.2 选项式写法

import { defineStore } from 'pinia'


export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  persist: {
    key: 'my-cart',         // 自定义 key，存在本地的键名
    storage: localStorage, // 也可换成 sessionStorage
    paths: ['items'],       // 只持久化 items数据，其余不进行本地存储
  },
})