vue-element-admin刷新侧边栏数据丢失

        使用vue-element-admin时,刷新页面侧边栏消失,仔细查看代码后找到原因,使用的路由与vuex有关,而在刷新页面时vue会重新加载vue实例,vuex中的数据会被初始化,所以看不到侧边栏是因为数据被重置了。

解决方法:将vuex中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie)页面刷新后再从浏览器中取出。(利用第三方插件)

1.安装vuex-persistedstate

npm install --save vuex-persistedstate

2. 在store/index.js文件中引入(文件结构如下图)

import createPersistedState from 'vuex-persistedstate'

 //替换原先的实例化的store

const store = new Vuex.Store({

    state: {},

    modules,

    getters,

    // 新增规则保存vuex的值

    plugins: [createPersistedState({

        storage: window.sessionStorage

    })]

})

 文件结构图:

vue-element-admin刷新侧边栏数据丢失_第1张图片

index.js文件代码:

vue-element-admin刷新侧边栏数据丢失_第2张图片

 替换后重新编译再次打开后,无论怎么刷新数据都不会丢失

你可能感兴趣的:(vuejs,vue.js,前端,javascript)