【陪诊系统-PC管理端】vuex数据持久化实现

问题:

根据前面的功能步骤,虽然已经实现了动态路由添加,但是当重新刷新后,页面也出现暂时性空白。

究其根本,这是因为vuex中保存的数据不具有持久化,每次刷新会重建vue实例,而store是挂载是vue实例上的,所以刷新后state中的数据会被重新初始化。

解决办法

使用浏览器缓存,但这里为了简便使用vuex-persistedstate插件来实现,这个插件本质还是localstorage。附上插件介绍:vuex-persistedstate的核心功能是通过监听Vuex的mutation,将状态存储在浏览器的localStorage或sessionStorage中。当页面重新加载时,插件会从存储中恢复状态,从而实现状态的持久化。

使用步骤

1.在store实例中使用使用vuex-persistedstate,设置缓存的名称

javascript 复制代码
// 创建Store实例
export default createStore({
    //createPersistedstate()为了实现持久化,key的属性值是缓存的名称
    plugins: [new createPersistedstate({
        key: 'pz_v3pz'
    })],
    modules: {
        // 每个模块有自己的statte mutation
        menu
    }
})

2.将浏览器缓存中的值取出来还是一样用localStorage.getItem

javascript 复制代码
const localData = localStorage.getItem('pz_v3pz')
// 如果保存的持久化pz_v3pz存在 就从本地存储读取
const state = localData ? localData.menu : {
    // 展开状态
    isCollapse: false,
    // 展开的菜单
    selectMenu: [],
    routerList: [],
    menuActive: '1-1'
}

that's all

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js