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 ...
随机推荐
- [转]oracle制定定时任务(dbms_jobs)
原文地址:http://www.cnblogs.com/siashan/p/4183868.html 本节摘要:本节介绍使用oracle自带的job来实现oracle定制定时执行任务. 1.引言 ...
- DbgPrint/KdPrint输出格式控制
在驱动编程学习中,往往需要通过DbgPrint或者KdPrint来输出调试信息,对于Check版本,KdPrint只是DbgPrint的一个宏定义,而对于Free版本,KdPrint将被优化掉.这些输 ...
- 稳定模式在RESTful架构中的应用
本文由 ImportNew - 乔永琪 翻译自 javaworld.欢迎加入翻译小组.转载请见文末要求. 分布式系统中保持网络稳定的五种方式 重试模式 超时模式 断路器模式 握手模式 隔离壁模式 倘若 ...
- Centos7下安装运行keepalived
master服务器ip地址:192.168.0.182 slave服务器ip地址:192.168.0.189 虚拟ip(VIP,一个尚未占用的内网ip即可)地址:192.168.0.180 确认使用 ...
- visual studio 2015 2017 key vs2015 vs2017密钥
Visual Studio Professional 2015简体中文版(专业版) KEY:HMGNV-WCYXV-X7G9W-YCX63-B98R2 Visual Studio Enterprise ...
- popupWindow使用timePicker时点击出现闪屏问题的解决办法
记录一下刚解决的新鲜bug,噔噔噔噔: 首先说明,我并不知道到底是什么原理导致和解决的问题 总之就是,我在使用popupWindow时的弹出方法使用的是popupWindow.showAsDropDo ...
- qt configure参数配置介绍
======================================全文是按照./configure -help来翻译的==================================== ...
- 关于qt QWebKit/QWebview 使用心得
当前项目为c/s客户端,采用qt4.8.7,需要使用仪表盘.折线图.柱状图等,曾经使用过qwt和自定义的图形控件,但是都不尽如人意.最近发现ECharts控件不错.为此就要在qt端使用web的技术.为 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- 【转】【VS Code】配置文件Launch及快捷键
Ctrl+shift+p,然后输入launch,点击第一个选项即可配置. 之后选择More即可 具体配置可修改为: { "version": "0.2.0", ...