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实现点击关注之后及时更新列表的更多相关文章
- SharePoint 2013 点击"关注" 报错
现象: 点击"关注" 报错. 解决办法: 1.确保bin文件夹下的.dll版本与web.config一致. 2.设置user porfile权限. 2.重启iis 结果如下:
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- vue验证码点击更新
vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- vue实现点击图标,图标在2s中完成旋转
<!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...
- UI自动化实例:遍历点击带有滚动条的列表每一项
需求:验证列表每条资讯里的用户数是否正确.该列表分页请求数据,每页10条,每次滚动到底部自动增量请求10条. 实现自动化必要性: 1 资讯每天不定时更新需经常性验证, 程序更新或者环境切换需验证所有资 ...
- vue 的点击事件怎么获取当前点击的元素
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 首先 vue的点击事件 是用 @cl ...
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...
随机推荐
- [转]mybatis如何直接 执行传入的任意sql语句 并按照顺序取出查询的结果集
原文地址:https://www.cnblogs.com/wuyun-blog/p/5769096.html 需求: 1.直接执行前端传来的任何sql语句,parameterType="St ...
- thinkphp前台模版字符串截取
ThinkPHP\Common\extend.php 中管理前台模版的截取{$vons.title|msubstr=0,26} 原始的代码是无法使用截取支持…. 由于涉及到只有汉字检测最为准确 需要加 ...
- java.io.BufferedOutputStream 源码分析
BufferedOutputStream 是一个带缓冲区的输出流,通过设置这种输出流,应用程序就可以字节写入到缓冲区中,当缓冲区满了以后再调用底层系统,而不必针对每次字节写入调用底层系统,从而提高系 ...
- win10老提示系统错误,要注销
win10老提示系统错误,要注销? 开启user manager 服务(对我没用) 用administrator账户(成功,不提示了) 或者创建一个新账户(未测)
- hive表增量抽取到oracle数据库的通用程序(二)
hive表增量抽取到oracle数据库的通用程序(一) 前一篇介绍了java程序的如何编写.使用以及引用到的依赖包.这篇接着上一篇来介绍如何在oozie中使用该java程序. 在我的业务中,分为两段: ...
- [数据结构]最大流之Ford-Fulkerson算法
本文主要讲解最大流问题的Ford-Fulkerson解法.可以说这是一种方法,而不是算法,因为它包含具有不同运行时间的几种实现.该方法依赖于三种重要思想:残留网络,增广路径和割. 在介绍着三种概念之前 ...
- iOS开发小技巧 - runtime适配字体
iOS开发小技巧 - runtime适配字体 版权声明:本文为博主原创文章,未经博主允许不得转载,有问题可联系博主Email: liuyongjiesail@icloud.com 一个iOS开发项目无 ...
- 安装Nginx+Lua+OpenResty开发环境配置全过程实例
安装Nginx+Lua+OpenResty开发环境配置全过程实例 OpenResty由Nginx核心加很多第三方模块组成,默认集成了Lua开发环境,使得Nginx可以作为一个Web Server使用. ...
- Window环境下搭建android NDK开发环境
1.下载ndk和cygwin NDK 下载地址:http://developer.android.com/tools/sdk/ndk/index.html Cygwin 下载地址:http://cyg ...
- LEARNING TO NAVIGATE IN COMPLEX ENVIRONMENTS
任务是地图里面导航,让agent从起始点到达指定位置. 用了supervised learning + reinforcement learning + lstm 用supervised learni ...