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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
vue如何截取字符串
May 06 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
python3安装crypto出错及解决方法
2019/07/30 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
什么是跨站脚本攻击
2014/12/11 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
酒吧创业计划书
2014/01/18 职场文书
单位成立周年感言
2014/01/26 职场文书
安装工程师岗位职责
2015/02/13 职场文书
继续教育个人总结
2015/03/03 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书