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 div 居中技巧应用介绍
Nov 24 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 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转成EXE文件
2006/10/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python单链表简单实现代码
2016/04/27 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python实现用户名密码校验
2020/03/18 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
求职信的最佳写作思路
2014/02/01 职场文书
大学毕业生推荐信
2014/07/09 职场文书
学习十八大的心得体会
2014/09/01 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书