「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」
前言
大家好，继续我们的掘金实战项目分享，在上一篇分享中本以为我们已经完美实现了优秀作者榜页面功能的分享，但是后来又随便操作了几下，结果发现了两个bug，所以在开始新功能的分享之前，我们不得不先修复掉它们。本次分享主要涉及到的内容就是bug修复：
- bug1：优秀作者榜列表关注与取消关注bug修复
- bug2：从作者列表页返回首页自动定位标签页bug修复
bug:1：优秀作者榜列表关注与取消关注bug修复
在前面的功能实现中，列表初始化时我们是通过v-show指令根据返回数据中的isfollowed属性来控制“关注”和“已关注”按钮的显示和隐藏。然后在操作关注和已关注按钮时则是通过原始的直接操作DOM的display方式来控制按钮的显示和隐藏。最开始在第一个tab页中没有发现什么问题，点击关注和已关注都能够实现关注或取消关注功能，并且两个按钮间的显示与隐藏也能顺利切换，然而当我们切换到其它tab页时再重复上面的操作，问题就出现了：点击“关注”或“已关注”按钮时没有任何反应（即点击关注/已关注后，关注/已关注按钮没有隐藏/展示），但实际上后台接口已经调用成功，只是前端页面没有发生变化。
查看源码后发现实际上具体的display样式已经添加到了DOM元素上只是页面展示没有更新，后来想了一下猜测可能是因为非相应是属性的原因（也只是猜测不能确定）。刚好我们在渲染列表初始化数据时用到来数据结构authorList中的isfollowed属性，而这个数据结构authorList是响应式的，于是就尝试去修改authorList中对应的作者信息的isfollowed属性值，进而动态来控制两个按钮的显示或隐藏，不试不知道，一试还真成功了，bug一就这么解决了。 修改后的代码
const follow = function(userId){
api.follow(userId).then(res=>{
const author = state.authorList.filter(item=>item.user_id === userId);
author[0].isfollowed = true;
});
}
const cancelFollow = function(userId){
api.cancelFollow(userId).then(res=>{
const author = state.authorList.filter(item=>item.user_id === userId);
author[0].isfollowed = false;
});
}
- 修改前
- 修改后
bug2：从作者列表页返回首页自动定位标签页bug修复
第二个问题：因为优秀作者榜列表是从首页中的关注列表点进来的，所以当我们在优秀作者榜中点击返回按钮返回到首页时也应该自动定位到关注tab页，在上一次分享中我们是通过给首页定义一个新的参数路由（参数为对应标签的索引）的形式实现返回首页自动定位标签页功能，从作者列表页点击返回按钮确实能够返回到首页并自动定位到关注标签页，然而这只是一个假象，不管我们参数传啥最终都是定位到关注标签页，如下图所示
然后调试发现：对应的索引参数已经传过来了，并且对应的active也已经被更新了，但对应的tab页就是不会切换，后来以为可能是异步的原因（因为标签列表是通过请求后台接口动态加载的），于是就把更新active的操作放在了onMounted回调函数中，但结果依然不行还是不会自动切换，这就有点摸不着头脑了，不知问题到底出在哪里。去度娘了一下，有人说是可能是数据类型的问题，需要把接收到的参数显示转换为Number类型，尝试过后依然不行。后来突发奇想：在响应式属性active初始化时获取一下路由参数，然后同时也在onMounted回调函数中再次获取路由参数并绑定给响应式属性active，别说还真生效了。问题就莫名其妙的解决了，到现在也不知道到底是什么原因。
修改代码部分：
两句代码必须同时设置，否则就不会生效
import { useRoute } from 'vue-router'
setup(){
const state = reactive({
active: Number(route.params.active) || 1,
//...省略未改动代码
});
//...省略未改动代码
onMounted(()=>{
active: Number(route.params.active) || 1;
});
}
总结
本次分享未涉及到新功能开发，而是又回到了优秀作者榜页面修复了两个bug，到此优秀作者榜列表页面也才算是真正的完成了吧，下次分享将实现首页各个标签页数据列表根据子标签id动态过滤加载。今天的分享就到这里了。
