vue实现点击关注后及时更新列表功能


Posted in Javascript onJune 26, 2018

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实现点击关注后及时更新列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
bootstrap table小案例
Oct 21 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 #Javascript
nuxt.js 缓存实践
Jun 25 #Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 #Javascript
浅谈super-vuex使用体验
Jun 25 #Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 #Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 #Javascript
JS实现仿微信支付弹窗功能
Jun 25 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
实例讲解Python爬取网页数据
2018/07/08 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python如何将两个txt文件内容合并
2019/10/18 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
JPA的优势都有哪些
2013/07/04 面试题
生产部管理制度
2014/01/31 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
寒假生活随笔
2015/08/15 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
python保存图片的四个常用方法
2022/02/28 Python