欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-15 15:36:19
目录代码:补充:总结需求:左树右表。组织树选中某一节点后,进入详情页面,再返回时需要保持选中。其他查询条件也需要保持状态。思路:用vuex结合localstorage缓存数据。点击树节点或查询按钮时,...

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

思路:用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代码

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

 在vuex中引入后就可以通过storage.set使用啦

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

总结

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