vue實(shí)現(xiàn)點(diǎn)擊關(guān)注后及時更新列表功能

如圖,我要實(shí)現(xiàn)點(diǎn)擊關(guān)注之后列表及時更新成最新的列表。
思路很簡單,主要是兩點(diǎn):
1、在點(diǎn)擊關(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;
},
};
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)點(diǎn)擊關(guān)注后及時更新列表功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
基于Vant UI框架實(shí)現(xiàn)時間段選擇器
這篇文章主要為大家詳細(xì)介紹了基于Vant UI框架實(shí)現(xiàn)時間段選擇器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-12-12
vue實(shí)現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼
本文主要介紹了vue實(shí)現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue2 el-table行懸停時彈出提示信息el-popover的實(shí)現(xiàn)
本文主要介紹了vue2 el-table行懸停時彈出提示信息el-popover的實(shí)現(xiàn),用到了cell-mouse-enter、cell-mouse-leave兩個事件,具有一定的參考價值,感興趣的可以了解一下2024-01-01

