bug解读:
指出在尝试剖析或序列化 JSON 数据时遇到了题目。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它要求数据必须是有用的 JSON 格式。在 JavaScript 中,undefined 是一个特殊的值,表现变量没有被赋值,它不是一个有用的 JSON 值。
场景:
在后台项目,用户登录后,通过用户的菜单权限渲染侧边栏菜单,做了持久化存储。当登出后,在登录页刷新页面,就报错了。
分析与办理:
首先知道了报错原因,以是在mutations存数据的时间,做了一下兼容:
- // let menu = JSON.stringify(val, (key, value) =>{
- // if(value === undefined){
- // return null
- // }
- // return value
- // })
- // Cookie.set('menu', menu)
复制代码 发现并没有用。
然而,假如改成在侧边栏组件中,获取menu的时间做兼容:
~computed:
- menu(){
- // 判断当前数据,如果缓存中没有,就去当前store中获取
- // 有个问题,如果把JSON.parse(Cookie.get('menu'))定义在当前store中兼容,数据是可以获取到,但是回到登录页刷新就会报错:
- // "undefined" is not valid JSON SyntaxError: "undefined" is not valid JSON
- // 而在这里做兼容,在登录页刷新时就不会报错
- console.log('menu', JSON.parse(Cookie.get('menu')) );
- return JSON.parse(Cookie.get('menu')) || this.$store.state.tab.menu
- }
复制代码 这样同样情况下,登出后在登录页刷新就不会报错。为什么呢?!
原来,是因为整个项目在初始化的时间,会跑一遍vuex,因为还没登陆,还没菜单数据,以是在tab.js中初始化menu的时间,JSON.parse(Cookie.get('menu'))的时间,Cookie.get('menu')的值是一个undefined,而JSON.parse('undefined')就会报那个错误:"undefined" is not valid JSON SyntaxError: "undefined" is not valid JSON。
验证:
在控制台中,输入JSON.parse('undefined')确实会复现这个错误。
但是,为什么在侧边栏组件,初始化menu值的时间就不报错,另有为什么已经在cookie存储menu的时间做兼容时,都没用呢?
是因为①,还没登录,压根没跑到侧边栏组件,没用到该menu方法,以是不报错;②,在tab.js中,也没有跑到mutations中的setMenu方法,以是一下的兼容没用。
- // let menu = JSON.stringify(val, (key, value) =>{
- // if(value === undefined){
- // return null
- // }
- // return value
- // })
- // Cookie.set('menu', menu)
复制代码 办理:
实在一开始发现 JSON.parse('undefined') 会报该错误,就可以在store的state中获取menu的时间做判定:
~tab.js: ==> state
- menu: Cookie.get('menu') ? JSON.parse(Cookie.get('menu')) : []
复制代码 这样bug就办理啦。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |