vue项目升级vue3中小坑记录

近期在进行项目中vue版本的升级,原项目使用vue-element-admin+ts的版本进行了魔改,遇到的坑比较多,随笔记录一、。

ts语法报错——JSON.parse()值类型错误

项目中由于实现原因,需要将后台返回的菜单进行本地存储(sessionStorage),但本地存储在使用时发现下列报错:
在这里插入图片描述
由于JSON.parse()的参数需要的是字符串类型,但通过sessionStorage读取到的值可能是null,与所需参数类型不一致,所以在sessionStorage取值是需要加类型判断(处理)

let sessionMenu = sessionStorage.getItem('xxx') || ''

如此再使用JSON.parse()方法是就不会报类型错误。
但事情并没有这么简单!!!

ts语法报错——JSON.parse()语法错误

先看报错信息:
在这里插入图片描述
问题原因:
由于存储在sessionStorage中的是菜单数据,内部包含了一些特殊字符: / > \ ,此时直接使用JSON.parse()进行处理就会报错。
处理方法:

// 存储数据时
let sessionMenu = encodeURIComponent(JSON.stringify(data))

// 使用数据时
let temp = sessionStorage.getItem('xxx') || ''
let storageMenu = JSON.parse(decodeURIComponent(temp))

如上处理,就可以正常使用JSON.parse()方法了。

关于vue2项目升级vue3项目

由于公司项目比较老旧,前后端不分离开发的,先期对一部分进行了vue2的改造,但是内部实现保留了大量的requirejs+jquery的实现,vue3版本中相关实现需要大规模的改写,考虑到vue2代码要改写vue3语法,相较于一点点的先升级vue3,在一步步改写内部实现,选择了直接重写某一功能模块的方式,当中遇到的问题也比较多。
改变是痛苦的,温水煮青蛙可能会感觉上不那么痛苦,但刮骨疗毒才能获得新生。

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值