vue implements timely updating of the list after clicking on the follow button-JS Tutorial-php.cn

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

不言

Release： 2018-07-05 17:42:21

Original

2042 people have browsed it

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(&#39;follow&#39;,{followUserId:item.pubId,page:this.page,size:this.size});            this.$set(item,"followStatus",true);//            this.$store.dispatch(&#39;refreshFollowList&#39;,{page:0,size:this.size});
          }else{
            Toast({
              message: "请先登录",
              duration: 800
            });
            setTimeout(function () {              this.$router.push(&#39;/login&#39;);
            },800)
          }
      },

Copy after login

watch:

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

Copy after login

followList.js vuex’s list module file:

action:

follow({dispatch,commit},payload){
    axios({
      method:"post",
      url:"web/follow/add",
      headers: {&#39;w-auth-token&#39;: Cookies.get(&#39;token&#39;)},
      params:{
        page:payload.page,
        size:payload.size
      },
      data:{
        followUserId:payload.followUserId
      }
    }).then((res) => {
      Toast("关注成功");      return dispatch(&#39;refreshFollowList&#39;)
    }).catch((error) => {
      Toast("关注出错，请重试！");
    });
  }

Copy after login

refreshFollowList({state,commit}){    if(token){
      axios.all([
        axios({
          method:"get",
          url:"web/pub/recommend",
          headers: {&#39;w-auth-token&#39;: token},
        }),
        axios({
          method:"get",
          url:"web/pub/list_pub_and_top_news",
          headers: {&#39;w-auth-token&#39;: Cookies.get(&#39;token&#39;)},
        })
      ]).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);
      });
    }
  },

Copy after login

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

Copy after login

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!