vue 页面静态化,vue 数据持久化
本文主要介绍vue页面状态的持久化，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
代码：补充：汇总需求:左树右表。在组织树中选择一个节点后，将进入详细信息页面，返回时需要保持选中状态。其他查询条件也需要维护。
思路:使用vuex结合localStorage来缓存数据。当点击树节点或查询按钮时，数据将保存在vuex中，同时也保存在localStorage中；当页面回滚时，将localStorage中存储的数据放入vuex，判断页面代码中是否有vuex中存储的数据。有就直接用，没有就默认初始数据。页面导航路径跳转时清除缓存的页面数据。
代码：
单击树节点时，将id保存到vuex。通过调度触发操作。
这个。$ store . dispatch( SetDeviceFaultId ，data.id)
在vuex的动作中，方法的突变是由commit触发的。
RemoveDeviceDefaultID({ commit }){//稍后在清除数据时会用到它。
commit( REMOVE _ device faultid )；
},
SetDeviceManageId({ commit }，id) {
commit(SET_DEVICEMANAGEID ，id)；
},
突变：修改数据
REMOVE_DEVICEFAULTID: (state)={
state.devicFaultId=null
storage . remove( devicFaultId )；
},
SET _ device manager id:(state，device manager id)={
state . deviceManageId=deviceManageId
Storage.set(deviceManageId ，deviceManageId)；
}
状态：当页面刚刚创建时，从localStorage获取缓存的数据。
devicFaultId:storage . get( devicFaultId )，
进入详细页面，返回时
this.params.organizeId=this。$store.state.tree.devicFaultId？这个。$ store . state . tree . devicfaultid:RES . data[0]。id；
当点击其他路线时，记得清除缓存的数据。
这个。$ store . dispatch( RemoveDeviceFaultId )
补充：
Storage.js代码
在vuex中引入后，可以通过Storage.set使用
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。