vue实现点击关注后及时更新列表功能

发布时间：2020-12-17 03:11:15 所属栏目：百科来源：网络整理

导读：p style="text-align: center" 如图，我要实现点击关注之后列表及时更新成最新的列表。思路很简单，主要是两点： 1、在点击关注之后去执行一个请求新的关注列表的action； 2、在vue组件中watch监听已关注列表和推荐关注列表主要代码如下：组件：关注的me

如图，我要实现点击关注之后列表及时更新成最新的列表。

思路很简单，主要是两点：

1、在点击关注之后去执行一个请求新的关注列表的action；

2、在vue组件中watch监听已关注列表和推荐关注列表

主要代码如下：

组件：

关注的methods:

watch:

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:

总结

以上所述是小编给大家介绍的vue实现点击关注后及时更新列表功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!