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;
  },
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏智能大石头

NewLife.Net——开始网络编程

14630
来自专栏偏前端工程师的驿站

ObjectDataSource与GridView配合使用经验总结系列二:分页

  令我使用ObjectDataSource配合GridView显示数据的最重要的原因之一就是ObjectDataSource的分页功能,其实GridView本...

20180
来自专栏CodingBlock

Android查缺补漏(IPC篇)-- 进程间通讯之Socket简介及示例

本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8425736.html

13440
来自专栏糊一笑

react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架...

41750
来自专栏肖洒的博客

【爬虫】(一):爬网页、爬图片、自动登录

HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写。 用于从WWW服务器传输超文本到本地浏览器的传送协议。

15330
来自专栏CodingBlock

Android查缺补漏(IPC篇)-- 进程间通讯之Socket简介及示例

本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8425736.html 学过计算机网络的...

43960
来自专栏向治洪

React Native移植原生Android

(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学...

21170
来自专栏我和未来有约会

Silverlight 3.0 中的 Local Connection

现在很多的需求中需要一个插件实例和另一个实例进行通讯。在同一个页面中调用Html、js等来通讯,而这个往往有一些限制,需要专门的去设置一些权限。在Silverl...

22570
来自专栏数据和云

Oracle 12.2 新特性 | PDB不同字符集变更深入解析

从12c版本12.1开始,就有了新特性——Pluggable Database,相比较之前通过schema的管理方式实现多用户管理,Pluggable Data...

39690
来自专栏www.96php.cn

thinkphp实现模板切换

thinkphp实现模板切换 首先在后台某个接口读取模板 Admin\Common\function.php /*  * 获取模板目录  */ function...

34350

扫码关注云+社区

领取腾讯云代金券