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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
js Dialog 实践分享
Oct 22 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
javascript实现下雨效果
2017/03/27 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python实现磁盘日志清理的示例
2020/11/05 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
化学教学随笔感言
2014/02/19 职场文书
经销商订货会主持词
2014/03/27 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android