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

这篇文章主要介绍了关于vue实现点击关注之后及时更新列表，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

主要代码如下：

组件：

关注的methods:

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:

followList(curVal, oldVal){        console.log(curVal)      },      userFollowList(curVal, oldVal){        console.log(curVal)      },

登录后复制

followList.js vuex的列表module文件：

action:

follow({dispatch,commit},payload){    axios({      method:"post",      url:"web/follow/add",      headers: {'w-auth-token': Cookies.get('token')},      params:{        page:payload.page,        size:payload.size      },      data:{        followUserId:payload.followUserId      }    }).then((res) => {      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",          headers: {'w-auth-token': Cookies.get('token')},        })      ]).then(axios.spread(function(res1,res2){        commit("REFRESHFOLLOWLIST",res1);        commit("REFRESHUSERFOLLOWLIST",res2);      }));    }else{      axios({        method:"get",        url:"web/pub/recommend",      }).then(function(res){        commit("REFRESHFOLLOWLIST",res);      });    }  },

登录后复制

mutation:

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;  },};

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

 基于Vue的延迟加载插件vue-view-lazy的介绍

Vue+mui实现图片的本地缓存

以上就是vue实现点击关注之后及时更新列表的详细内容，更多请关注【创想鸟】其它相关文章！