记录一次排bug心得---Vue warn]: Error in render: “TypeError: Cannot read properties of null (reading ‘length

这是一次人类低阶程序员排bug过程

最近在跟b站up码神之路练习SpringBoot的个人博客项目，算是比较入门的项目吧！
当我跟着视频做到P22评论功能，发现一个bug

即登录后，无法查看文章详情。
F12后报的是
Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'length
事实上我不是特别懂前端vue，所有前端代码是直接用up的代码。
然后自己摸索了一会，没有头绪。所以搂一眼评论，看看有没有同样遇到此问题的。

对于这个回答，我其实是觉得不靠谱的。主要原因是当用户没有登录时，是可以查看文章详情。即这跟类型是无关的，对于说id太长，跟是不靠谱，因为文章里的id有只为个位数，登录后依然无法打开。

于是我又苦哈哈接着去排，首先我去找返回的数据(如下)，这是符合接口要求的。

接着我打开WebStorm去看报错的代码
提示length为null，然后找到了 this.$store.state.avatar。这块以我浅薄的理解就像是全局变量一样

    computed: {
      avatar() {
        let avatar = this.$store.state.avatar

        if (avatar.length > 0) {
          return avatar
        }
        return default_avatar
      },
      title() {
        return `${this.article.title} - 文章 - 码神之路`
      }
    },

继续翻，找到了

这里我其实已经明白，大概是avatar返回null，或者没有返回

---

中午小睡一会，接着干

接着看后台代码
后台是用jwt技术，生成token，且把token放入redis中

(红框是我修改后，上面为原token，果然没有avatar)
继续找

    @Override
    public SysUser findUser(String account, String password) {
        LambdaQueryWrapper<SysUser> queryWrapper=new LambdaQueryWrapper<>();
        queryWrapper.eq(SysUser::getAccount,account);
        queryWrapper.eq(SysUser::getPassword,password);
        queryWrapper.select(SysUser::getAccount,SysUser::getId,SysUser::getNickname);
        queryWrapper.last("limit 1");
        return sysUserMapper.selectOne(queryWrapper);
    }

问题所在
少了一个，所以只有Account、id、NickName

SysUser::getAvatar

修改再次测试，bug排除！！！

---

心得

1. 后端程序员也要懂前端
2. 靠别人不如自己