使用vuex存储状态页面刷新后数据丢失怎么处理

vue是单页面应用,页面切换都是在一个页面跳转路由,因此sessionStorage较为合适。(sessionStorage的生命周期是在仅在当前会话下有效)

所以应该在页面加载的时候将store里面的状态传入进sessionStorage里面

在app.vue内假如以下代码

created() {
            // 在页面加载时读取sessionStorage里的状态信息,还原store
            if (sessionStorage.getItem('store')) {
                this.$store.replaceState(
                    Object.assign(
                        {},
                        this.$store.state,
                        JSON.parse(sessionStorage.getItem('store'))
                    )
                )

                // 还原store后,删除sessionStorage里的备份状态信息
                sessionStorage.removeItem('store')
            }

            // 在页面刷新时将store里的信息保存到sessionStorage里,以便刷新页面后还原store
            window.addEventListener('beforeunload', ()=> {
				sessionStorage.setItem(
                    'store',
                    JSON.stringify(this.$store.state)
                )
			})
        },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值