vue实现点击关注后及时更新列表功能
更新时间:2018年06月26日 08:39:09 作者:蓓蕾心晴
这篇文章主要介绍了vue实现点击关注后及时更新列表功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

如图,我要实现点击关注之后列表及时更新成最新的列表。
思路很简单,主要是两点:
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实现点击关注后及时更新列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
vue项目中将element-ui table表格写成组件的实现代码
这篇文章主要介绍了vue项目中将element-ui table表格写成组件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式)
这篇文章主要介绍了vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
vue.js组件vue-waterfall-easy实现瀑布流效果
这篇文章主要为大家详细介绍了vue.js实现瀑布流之vue-waterfall-easy的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-08-08


最新评论