Home  >  Article  >  Web Front-end  >  vue implements timely updating of the list after clicking on the follow button

vue implements timely updating of the list after clicking on the follow button

不言
不言Original
2018-07-05 17:42:212122browse

This article mainly introduces the implementation of vue to update the list in time after clicking on the follow. It has a certain reference value. Now I share it with you. Friends in need can refer to it

As shown in the picture, I want to update the list to the latest list in time after clicking "Follow".

The idea is very simple, mainly two points:

1. After clicking follow, execute an action to request a new follow list;

2. In the vue component watch monitors the watched list and recommended watch list

The main code is as follows:

Component:

Following 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’s list module file:

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

The above is the entire content of this article, I hope it will be useful for everyone’s learning Help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Introduction to Vue-based lazy loading plug-in vue-view-lazy

Vue mui implements local caching of images

The above is the detailed content of vue implements timely updating of the list after clicking on the follow button. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn