实际开发中的有趣bug：“undefined“ is not valid JSON SyntaxError: “undefined“ is not valid JSON。

最新推荐文章于 2025-03-14 08:15:15 发布

我爱加班、、

最新推荐文章于 2025-03-14 08:15:15 发布

阅读量7.6k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： # vue项目实际开发中的bug # vuex 文章标签： bug json 前端 javascript vue.js ecmascript ajax

本文链接：https://blog.csdn.net/weixin_48420104/article/details/137746478

文章讲述了在Vue项目中，由于尝试解析未赋值的`undefined`导致的JSON解析错误。作者通过在Vuex状态和组件计算属性中添加兼容性检查，解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: