Vue3+Vite+TypeScript+Element Plus开发-11.Pinia持久化处理

原创已于 2025-04-18 10:25:29 修改 · 820 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue3 #element plus #vue3 vite #vue3 element #Pinia持久化

于 2025-04-10 15:48:43 首次发布

Vue3+TypeScript+Element Plus开发专栏收录该内容

25 篇文章

订阅专栏

系列文档目录

Vue3+Vite+TypeScript安装

客制Form组件

国际化

配置文件

文章目录

前言

在上一章节中重点探讨了如何实现基于用户角色的动态菜单加载功能。然而，在实际使用过程中发现了一个问题：当主页面刷新后，菜单数据会丢失，为了解决这一问题，本章节将采用第三方插件对Pinia进行持久化处理。

说明：比较遗憾的是，在开发过程中，由于在 Git 提交前误用了版本回退操作，导致部分配置和文件丢失。

一、问题现象

Pinia 数据在页面刷新后丢失的原因是其默认将数据存储在内存中，而浏览器刷新会重新加载页面，导致内存中的数据被重置，为了解决此问题将把数据持久化，

二、插件实现数据持久化

1.安装

npm install pinia-plugin-persistedstate

2.全局配置

在 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.ts

import { defineStore } from 'pinia';
 

// 定义公共 store
export const useAllDataStore = defineStore('useAllData', {
  // 定义状态
  state: () => ({
    isCollapse: false, // 定义初始状态
    username: '',
    token_key: '',
    menuData:[],
  }),

  // 定义 actions
  actions: {
    // 设置用户名
    setUsername(username: string) {
      this.username = username;
    },

    // 获取用户名
    getUsername(): string {
      return this.username;
    },

    // 设置 token_key
    setTokenKey(token_key: string) {
      this.token_key = token_key;
    },

    // 获取 token_key
    getTokenKey(): 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;