父组件和子组件同是使用 beforeDestroy 钩子 保存同一份数据

解决Vue组件数据同步至sessionStorage
本文探讨了在Vue应用中,如何在父组件和子组件的beforeDestroy生命周期钩子中,正确地将数据异步保存至sessionStorage。通过使用setTimeout确保数据按预期保存,避免了数据覆盖的问题。

根据业务需求,进入页面先取 sessionStorage,在页面离开的时候,需要保存数据到 sessionStorage 里边,然后跳转到下个页面,进入到下个页面之后,就取 sessionStorage 里边的数据

比如后端需要的数据格式

    {
        settings:{
            content: '这里是父组件需要保存的'
            dataset: '子组件保存的内容'
        }
    }
复制代码

父组件 和 子组件 同时 要 beforeDestroy 离开之前 保存数据,跳转到 A 页面, 进入 A 页面取 sessionStorage 里边的内容接着编辑,但是 数据是取到了,内容总是 子组件保存的内容, 父组件没有保存成功。

问题是需要让他们有先后保存的概念, 所以用到了异步 setTimeout进行保存 子组件的内容

    beforeDestroy () {
        setTimeout (() =>{
            sessionStorage.setItem("streamJobEntity", JSON.stringify(data));
        }, 0) 
    },
复制代码

转载于:https://juejin.im/post/5c258921e51d452f4d1a217a

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值