如图,我要实现点击关注之后列表及时更新成最新的列表。

思路很简单,主要是两点:

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实现点击关注之后及时更新列表的更多相关文章

  1. SharePoint 2013 点击"关注" 报错

    现象: 点击"关注" 报错. 解决办法: 1.确保bin文件夹下的.dll版本与web.config一致. 2.设置user porfile权限. 2.重启iis 结果如下:

  2. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  3. vue验证码点击更新

    vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...

  4. js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  5. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  6. vue实现点击图标,图标在2s中完成旋转

    <!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...

  7. UI自动化实例:遍历点击带有滚动条的列表每一项

    需求:验证列表每条资讯里的用户数是否正确.该列表分页请求数据,每页10条,每次滚动到底部自动增量请求10条. 实现自动化必要性: 1 资讯每天不定时更新需经常性验证, 程序更新或者环境切换需验证所有资 ...

  8. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

  9. spring boot + vue + element-ui全栈开发入门——前端列表页面开发

     一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...

随机推荐

  1. 自己动手写Android框架-数据库框架

    大家在工作中基本上都有使用到数据库框架 关系型:ORMLite,GreenDao 对象型:DB4O,Perst 这些数据库用起来都非常的简单,对于我们Android上来说这些数据库足够我们使用了,但是 ...

  2. [转]oracle存储过程中update不成功的一个原因

    原文地址:http://lin49940.iteye.com/blog/466626 今天一个同事写oracle 的存储过程遇到了一个问题, 他在里面update 操作不能完成更新的操作, 但是又不会 ...

  3. mongo源码学习(三)请求接收传输层

    在上一篇博客中(mongo源码学习(二)db.cpp之mongoDbMain方法分析),我们把db.cpp中的mongoDbMain的执行过程分析了一下,最后会调用initAndListen(serv ...

  4. 俞军的PM12条

     俞军的PM12条:1.PM首先是用户2.站在用户角度看待问题3.用户体验是一个完整的过程4.追求效果,不做没用的东西5.发现需求,而不是创造需求6.决定不做什么,往往比决定做什么更重要7.用户是很难 ...

  5. Java编程的逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  6. azkaban安装

    1.下载:git clone https://github.com/azkaban/azkaban.git 2.编译:./gradlew build -x test 3. 创建目录并拷贝 mkdir ...

  7. PHP经纬度 测距

    /** *求两个已知经纬度之间的距离,单位为米 *@param lng1,lng2 经度 *@param lat1,lat2 纬度 *@return float 距离,单位米 **/ function ...

  8. DPI (深度报文检测) 关于DPI的学习笔记

    关于DPI的学习笔记 先看一下定义 : DPI(Deep Packet Inspection)是一种基于数据包的深度检测技术,针对不同的网络应用层载荷(例如HTTP.DNS等)进行深度检测,通过对报文 ...

  9. 自然语言交流系统 phxnet团队 创新实训 项目博客 (九)

    项目技术总结: VoiceToText的具体使用方法: 语音转文本部分是调用的科大讯飞的在线语音,它的激发方式是按键,通过按钮触发开启安卓设备的录音,此部分需要在源码中写入关于安卓权限的要求,来调用安 ...

  10. win8.1系统如何激活

    若是系统是win8.1或者win8系统,可能由于产品过期或者采用的系统不是正版的话,会出现windows 未激活的状态,想要激活需下载一个win8/win8.1系统 激活工具. http://www. ...