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

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就解决啦。