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 相关文章推荐
使用正则替换变量
May 05 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
node.js如何操作MySQL数据库
Oct 29 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 启动报错如何解决
2014/01/17 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Python open读写文件实现脚本
2008/09/06 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python开发之函数定义实例分析
2015/11/12 Python
Python书单 不将就
2017/07/11 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
浅析Python面向对象编程
2020/07/10 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
员工考核管理制度
2014/02/02 职场文书
员工工作表现评语
2014/04/26 职场文书
暑期教师培训方案
2014/06/07 职场文书
南京青奥会口号
2014/06/12 职场文书
应用外语系自荐信
2014/06/26 职场文书
化工专业求职信
2014/07/01 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
晚会闭幕词
2015/01/28 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
数据设计之权限的实现
2022/08/05 MySQL