<p style="text-align: center">
如图，我要实现点击关注之后列表及时更新成最新的列表。
思路很简单，主要是两点：
1、在点击关注之后去执行一个请求新的关注列表的action；
2、在vue组件中watch监听已关注列表和推荐关注列表
主要代码如下：
组件：
关注的methods:
rush:js;">
followMethod(item){
if(this.token){
this.$store.dispatch('follow',{followUserId:item.pubId,page:this.page,size:this.size});
this.$set(item,"followStatus",true);
// this.$store.dispatch('refreshFollowList',{page:0,size:this.size});
}else{
Toast({
message: "请先登录",duration: 800
});
setTimeout(function () {
this.$router.push('/login');
},800)
}
},
watch:
rush:js;">
followList(curVal,oldVal){
console.log(curVal)
},userFollowList(curVal,
followList.js vuex的列表module文件：
action:
{
Toast("关注成功");
return dispatch('refreshFollowList')
}).catch((error) => {
Toast("关注出错，请重试！");
});
}
refreshFollowList({state,commit}){
if(token){
axios.all([
axios({
method:"get",url:"web/pub/recommend",headers: {'w-auth-token': token},}),axios({
method:"get",url:"web/pub/list_pub_and_top_news",})
]).then(axios.spread(function(res1,res2){
commit("REFRESHFOLLOWLIST",res1);
commit("REFRESHUSERFOLLOWLIST",res2);
}));
}else{
axios({
method:"get",}).then(function(res){
commit("REFRESHFOLLOWLIST",res);
});
}
},
mutation:
rush:js;">
const mutations = {
REFRESHFOLLOWLIST(state,res){
state.followList=res.data.content;
state.totalPages=res.data.totalPages;
},REFRESHUSERFOLLOWLIST(state,res){
state.userFollowList=res.data.content;
state.userTotalPages=res.data.userTotalPages;
},};
总结
以上所述是小编给大家介绍的vue实现点击关注后及时更新列表功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
