Pinia官网

     https://pinia.vuejs.org/zh

pinia-plugin-persistedstate官网

     https://prazdevs.github.io/pinia-plugin-persistedstate/zh

安装Pinia
	npm install pinia

安装Pinia持久化存储插件
	npm i pinia-plugin-persistedstate

src\main.js
	import { createApp } from 'vue'
	import App from './App.vue'

	//路由
	import router from './router' //导入路由模块

	//整体导入 ElementPlus 组件库
	import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
	import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 css 样式
	import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
	import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包

	//Pinia
	import { createPinia } from 'pinia' //导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
	import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
	const pinia = createPinia() //创建一个Pinia实例, 用于在应用中集中管理状态(store)
	pinia.use(piniaPluginPersistedstate) //将持久化存储插件添加到 pinia 实例上


	const app = createApp(App)

	app.use(pinia) //将 Pinia 实例注册到 Vue 应用中

	app.use(router) //将 Vue Router 插件注册到 Vue 应用中

	//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	    app.component(key, component)
	}
	app.use(ElementPlus, { //将 ElementPlus 插件注册到 Vue 应用中
	    locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
	})

	app.mount('#app')

src\stores\admin\admin.js
	import { reactive } from 'vue'
	import { defineStore } from 'pinia'

	const useAdminStore = defineStore('admin', () => {
	    const data = reactive({
	        name:"",
	        token:"",
	        expireDate: "" //过期日期
	    })

	    const save = (name,token,expireDate) => {
	        data.name = name
	        data.token = token
	        data.expireDate = expireDate
	    }

	    return {
	        data,
	        save
	    }
	},
	{
	  persist: true //持久化存储到 localStorage 中
	})

	export { useAdminStore }

src\views\admin\login.vue
	<script setup>
	    import { useAdminStore } from '@/stores/admin/admin.js'
	    const adminStore = useAdminStore()

	    //管理员状态存储至 pinia (持久化存储到 localStorage 中)
	    //adminStore.save("邓瑞","dengruicode.com","2024-05-18")

	    console.log(adminStore.data)
	</script>

	<template>
	    <h3>登录页</h3>

	    <el-icon><User /></el-icon>

	    <hr>

	    <el-button type="primary">登录</el-button>
	</template>

	<style scoped>

	</style>