如圖，我要實現點擊關注之后列表及時更新成最新的列表。
思路很簡單，主要是兩點：
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實現點擊關注后及時更新列表功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
