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

总结

以上所述是小编给大家介绍的vue实现点击关注后及时更新列表功能，希望对大家有所帮助