技术分享
解决-刷新页面Vuex数据丢失
2021-06-04
vue将数据存入vuex里面,在进行页面刷新的时候,数据丢失,这里有两个解决办法应对不同场景:
第一种
假如你的路由跳了3层以上,而且这几个页面都要用同一个数据roomId
,肯定想到路由传参的方式传roomId
,那么问题来了:
1,就像微信公众号下面(浏览器上面)的倒退和前进按钮,点来点去的,参数就没了。
2,刷新页面参数丢失了(当然query传参方式不会丢失,但是它会显示在地址栏还有大小限制)
ok,解决方法:
初始化得到
roomId
后,存入sessionStorge
Vuex
里面的state
直接读取存入sessionStorge
的这个roomId
在页面修改
roomId
的时候,提交mutation
修改Vuex
里面存的roomId
,同时将这个roomId
存入sessionStorge
页面里面用到
roomId
的地方都去从Vuex
里面读取
叙述起来很啰嗦,操作很简单,这是朕最喜欢的办法 这样无论你在哪个页面进行刷新,怎么前进后退,数据都在。
第二种:
将请求这个数据源的办法放在vuex
里面进行请求,在App.vue
里面进行提交,确保每次刷新都会拿到数据:
// store state: { dataList: [] }, mutations: { getDate(state) { this.$get('').then(res => { state.dataList = res.data }) }, }, // App.vue mounted () { this.$store.commit('getDate') },
然后在你刷新的页面获取state.dataList
就酱~
~欢迎更新更快更有效的解决办法
- 标签:
-
容灾备份