搞笑的排错经历

学习某马第一个项目，在后台界面总是显示不出用户名（username或nickname）。但是打包缺没有错。

于是开始排错，首先怀疑是否后台没有传值，但是通过vue-devtools可以看到本地已经存储token了。所以排除后台没有传值的情况。

那开始怀疑是否是变量名写错了，或者函数调用出错，或是全局变量出错、导包出错？

首先想到api和request因为成功接收到了token ，大概率问题不在这儿。那么后台获取的这些信息肯定要作为全局数据存储，所以去看store下的user.js。看到导入的api和相关函数是正确的，于是就在想是否是store中的异步操作调用函数有没有用对，然后在调用处，打印res看能否获取后台的数据。发现确实可以打印出正常的参数。那就说明是获得后，处理过程中出问题了。因为要写到state中，必须要用mutation中的用户数据更新函数，找到这个函数，就在异步函数里面，找到了问题，更新函数的第二个参数应该是 获取的对象的属性（res.data）但是我写成了 （res.date）。问题解决。

但是为啥会写成res.date呢。我发现解构对象的时候用的是{data:res}，让我想当然的排斥res.data的写法。解构对象其实 {A:B} = obj 就是给对象obj（实际上ES6的新类promise）中的data属性起了一个名字叫B。然后就可以用B.xx（对象.属性的方式调用了）。这其实是没搞清楚，解构对象的问题。

问题解决了，其实解决问题只是最后一步，而排查问题才是真正的困难。首先要确定问题，那就得对整个项目的每个文件夹/文件的作用十分熟悉，并且能根据报错来反推，这也需要对代码熟悉。