解决Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id‘)报错

项目场景：

做黑马的人资项目时，要读取store中的userInfo里的id值，报Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id’)错，起初以为是axios发异步请求的问题，直到后来一直尝试，终于找到了问题所在！

---

问题描述

连续访问对象里的值

例如：我现在user模块下的state是这样的，userInfo里的值要等到发请求才会填充

state: {
    token: getToken() || '',
    userInfo: {

    }

---

请求回来的值是这样的

那我现在要是还没请求，userInfo 就还是个空对象，访问store.user.state.userInfo.data，就是为undefined
但是！！最重要的点来了，如果你接着访问store.user.state.userInfo.data.id,这时候就不是简单的undefined
而是 控制台报错，Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id’）

原因分析：

从上面的讲解来看，不难知道，你要是访问对象里不存在的属性，结果是undefined，但如果你接着还往下访问，那就会报错

---

解决方案：

有两个办法解决

1.在userInfo下加一个data

state: {
    token: getToken() || '',
    userInfo: {
      data: {}
    }
  }

像这样，你访问userInfo.data就是一个空对象，再访问userInfo.data.id的话，就是undefined啦！ 就不会报错了

2.利用？.的访问方式

store.state.user.userInfo?.data?.id, 利用？.的方式访问对象中的属性，要是有一个属性找不到的话，就会立即返回undefined，
也不会出现报错的情况

store.state.user?.data?.id