问题:
根据前面的功能步骤,虽然已经实现了动态路由添加,但是当重新刷新后,页面也出现暂时性空白。
究其根本,这是因为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