详解vue页面状态持久化详解
更新时间：2021年12月05日 16:04:16 作者：Wonder*
这篇文章主要为大家介绍了vue页面状态持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
需求：左树右表。组织树选中某一节点后，进入详情页面，再返回时需要保持选中。其他查询条件也需要保持状态。
思路：用vuex结合localStorage缓存数据。点击树节点或查询按钮时，将数据保存在vuex中，同时存在localStorage中；页面回退时，将存在localStorage中的数据放到vuex中，在页面代码中判断vuex中是否有我们存的数据，有则直接用，没有则默认初始数据。当页面导航路由跳转时再清除缓存的页面数据。
代码：
点击某树节点时，存下id至vuex中。通过dispatch触发action
this.$store.dispatch('SetDeviceFaultId', data.id)
在vuex的actions中，通过commit 触发 mutations 中的方法
RemoveDeviceFaultId({ commit }) { //后面清除数据时会用到
commit('REMOVE_DEVICEFAULTID');
},
SetDeviceManageId({ commit }, id) {
commit('SET_DEVICEMANAGEID', id);
},
mutations：修改数据
REMOVE_DEVICEFAULTID: (state) => {
state.devicFaultId = null
Storage.remove('devicFaultId');
},
SET_DEVICEMANAGEID: (state, deviceManageId) => {
state.deviceManageId = deviceManageId
Storage.set('deviceManageId', deviceManageId);
}
state：页面刚创建时从localStorage中拿缓存的数据
devicFaultId: Storage.get('devicFaultId'),
进入某详情页，回退时
this.params.organizeId = this.$store.state.tree.devicFaultId ? this.$store.state.tree.devicFaultId : res.data[0].id;
点击其他路由时，记得清除缓存的数据
this.$store.dispatch('RemoveDeviceFaultId')
补充：
storage.js代码
在vuex中引入后就可以通过Storage.set使用啦
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
详解vue2.0+vue-video-player实现hls播放全过程
这篇文章主要介绍了详解vue2.0+vue-video-player实现hls播放全过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Ant Design Vue table中列超长显示...并加提示语的实例
这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue父组件触发事件改变子组件的值的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了Vue实现简单网页计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了Vue 实现新国标红绿灯效果实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue 自定义组件的写法与用法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了vue渲染方式render和template的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了Vue2.0 $set()的正确使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue实现面包屑的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了VUE如何实现点击文字添加颜色(动态修改class),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论