• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

详解vue页面状态持久化详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

需求:左树右表。组织树选中某一节点后,进入详情页面,再返回时需要保持选中。其他查询条件也需要保持状态。

思路:用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使用啦

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用vue.js 为基础的仿QQ聊天室发布时间:2022-02-05
下一篇:
tkinter使用js的canvas实现渐变色发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap