這篇文章給大家分享的是有關(guān)vue如何實現(xiàn)點擊關(guān)注后及時更新列表功能的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供監(jiān)利網(wǎng)站建設(shè)、監(jiān)利做網(wǎng)站、監(jiān)利網(wǎng)站設(shè)計、監(jiān)利網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、監(jiān)利企業(yè)網(wǎng)站模板建站服務(wù),十多年監(jiān)利做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
如圖,我要實現(xiàn)點擊關(guān)注之后列表及時更新成最新的列表。
思路很簡單,主要是兩點:
1、在點擊關(guān)注之后去執(zhí)行一個請求新的關(guān)注列表的action;
2、在vue組件中watch監(jiān)聽已關(guān)注列表和推薦關(guān)注列表
主要代碼如下:
組件:
關(guān)注的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("關(guān)注成功"); return dispatch('refreshFollowList') }).catch((error) => { Toast("關(guān)注出錯,請重試!"); }); } 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; }, };
感謝各位的閱讀!關(guān)于“vue如何實現(xiàn)點擊關(guān)注后及時更新列表功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
本文名稱:vue如何實現(xiàn)點擊關(guān)注后及時更新列表功能
標題網(wǎng)址:http://bm7419.com/article38/psdjsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、標簽優(yōu)化、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、小程序開發(fā)、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)