Vue3+Vite+TypeScript+Element Plus开发-11.Pinia持久化处理
系列文档目录
Vue3+Vite+TypeScript安装
Element Plus安装与配置
主页设计与router配置
静态菜单设计
Pinia引入
Header响应式菜单缩展
Mockjs引用与Axios封装
登录设计
登录成功跳转主页
多用户动态加载菜单
Pinia持久化
动态路由-动态增加路由
动态路由-动态删除路由
路由守卫
文章目录
目录
系列文档目录
文章目录
前言
一、问题现象
二、插件实现数据持久化
1.安装
2.全局配置
3.局部配置
4.运行效果
三、起始页调整login
1.路由调整
2.运行效果
后续
参考文献
前言
在上一章节中重点探讨了如何实现基于用户角色的动态菜单加载功能。然而，在实际使用过程中发现了一个问题：当主页面刷新后，菜单数据会丢失，为了解决这一问题，本章节将采用第三方插件对Pinia进行持久化处理。
说明：比较遗憾的是，在开发过程中，由于在 Git 提交前误用了版本回退操作，导致部分配置和文件丢失。
一、问题现象
Pinia 数据在页面刷新后丢失的原因是其默认将数据存储在内存中，而浏览器刷新会重新加载页面，导致内存中的数据被重置，为了解决此问题将把数据持久化，
二、插件实现数据持久化
1.安装
npm install pinia-plugin-persistedstate2.全局配置
在 main.ts 文件中全局配置持久化插件，以实现数据的持久化存储。
主要调整部分：
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';// 使用插件pinia.use(piniaPluginPersistedstate);完整代码：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import router from './router';
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
// 引入 Mock 数据
import './mock'// 创建 Pinia 实例
const pinia = createPinia();const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}app.use(ElementPlus, {locale: zhCn,})app.use(router);// 使用插件pinia.use(piniaPluginPersistedstate);app.use(pinia);app.mount('#app')3.局部配置
在 Store 中进行局部持久化采用方法2进行配置，但该配置存在一些问题。具体的问题表现以及相应的解决方法将在后续章节中详细讲解。
方法1：简单配置
persist: true, // 整个状态持久化方法2：高级配置
persist: {enabled: true,strategies: [{key: 'useAllData-store',storage: localStorage,paths: ['token_key','menuData'], // 指定需要持久化的字段},],},配置后完整代码：
// src/stores/index.tsimport { defineStore } from 'pinia';// 定义公共 store
export const useAllDataStore = defineStore('useAllData', {// 定义状态state: () => ({isCollapse: false, // 定义初始状态username: '',token_key: '',menuData:[],}),// 定义 actionsactions: {// 设置用户名setUsername(username: string) {this.username = username;},// 获取用户名getUsername(): string {return this.username;},// 设置 token_keysetTokenKey(token_key: string) {this.token_key = token_key;},// 获取 token_keygetTokenKey(): string {return this.token_key;},// 设置菜单数据setMenuData(menuData: any){this.menuData = menuData},// 获取菜单数据getMenuData(): [] {return this.menuData;},},persist: {enabled: true,strategies: [{key: 'useAllData-store',storage: localStorage,paths: ['token_key','menuData'], // 指定需要持久化的字段},],},});4.运行效果
刷新后，菜单资料还存在未丢失
三、起始页调整login
本部分的调整与持久化无关。该系统文章主要记录开发过程。由于登录界面已经设计完成，在测试过程中， login 接口的使用频率较高。因此，本次调整主要是为了便于测试。
1.路由调整
调整默认指向： redirect: { name: 'login' }, // 默认重定向到 login子路由
完整代码：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';import Main from '@/views/Main.vue'; //import Home from '@/views/Home.vue';import UserInfo from '@/views/SysSettings/UserInfo.vue';import AccountSetting from '@/views/SysSettings/AccountSetting.vue';import Login from '@/views/Login.vue';// 定义路由配置const routes: RouteRecordRaw[] = [{path: '/',name: 'main',component: Main,redirect: { name: 'login' }, // 默认重定向到 login子路由children: [{path: 'home',name: 'home',component: Home,},{path: 'UserInfo',name: 'UserInfo',component: UserInfo,},{path: 'AccountSetting',name: 'AccountSetting',component: AccountSetting,},],},{path: '/login',name: 'login',component: Login,},{path: '/main', // 如果确实需要 /main 路径redirect: { name: 'home' }, // 仅保留重定向规则},];// 创建路由器const router = createRouter({history: createWebHistory(),routes, // 使用已定义的路由配置});export default router;2.运行效果
再次http://localhost:5173会自动变为 http://localhost:5173/login
出现登录界面
后续
下一章节动态路由。
参考文献
官方网址：Getting Started | Pinia Plugin PersistedstateConfigurable persistence of Pinia stores.
https://prazdevs.github.io/pinia-plugin-persistedstate/guide/