logo
关于我们

技术分享

技术分享 解决-刷新页面Vuex数据丢失

解决-刷新页面Vuex数据丢失

2021-06-04

vue将数据存入vuex里面,在进行页面刷新的时候,数据丢失,这里有两个解决办法应对不同场景:

第一种

假如你的路由跳了3层以上,而且这几个页面都要用同一个数据roomId,肯定想到路由传参的方式传roomId,那么问题来了:

1,就像微信公众号下面(浏览器上面)的倒退和前进按钮,点来点去的,参数就没了。
2,刷新页面参数丢失了(当然query传参方式不会丢失,但是它会显示在地址栏还有大小限制)

ok,解决方法:

  1. 初始化得到roomId后,存入sessionStorge

  2. Vuex里面的state直接读取存入sessionStorge的这个roomId

  3. 在页面修改roomId的时候,提交mutation修改Vuex里面存的roomId,同时将这个roomId存入sessionStorge

  4. 页面里面用到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


就酱~
~欢迎更新更快更有效的解决办法

云祺备份软件,云祺容灾备份系统,虚拟机备份,数据库备份,文件备份,实时备份,勒索软件,美国,图书馆
  • 标签:
  • 容灾备份

您可能感兴趣的新闻 换一批

现在下载,可享30天免费试用

立即下载