vue实现点击关注后及时更新列表功能

 更新时间:2018年06月26日 08:39:09   作者:蓓蕾心晴  
这篇文章主要介绍了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实现点击关注后及时更新列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader)

    通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下
    2018-12-12
  • Vue Router4路由导航守卫实例全面解析

    Vue Router4路由导航守卫实例全面解析

    这篇文章主要为大家介绍了Vue Router4路由导航守卫实例全面解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • element-ui实现表格边框的动态切换并防抖

    element-ui实现表格边框的动态切换并防抖

    这篇文章主要介绍了element-ui实现表格边框的动态切换并防抖方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue项目嵌套iframe实现发送、接收数据

    vue项目嵌套iframe实现发送、接收数据

    这篇文章主要介绍了vue项目嵌套iframe实现发送、接收数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue使用element-plus依赖实现表格增加的示例代码

    vue使用element-plus依赖实现表格增加的示例代码

    这篇文章主要为大家详细介绍了vue使用element-plus依赖实现表格增加,文中示例代码讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2023-12-12
  • vue.js默认路由不加载linkActiveClass问题的解决方法

    vue.js默认路由不加载linkActiveClass问题的解决方法

    这篇文章主要给大家介绍了关于vue.js默认路由不加载linkActiveClass问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-12-12
  • Vue中的变量赋值问题

    Vue中的变量赋值问题

    这篇文章主要介绍了Vue中的变量赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 如何在vue3中同时使用tsx与setup语法糖

    如何在vue3中同时使用tsx与setup语法糖

    这篇文章主要介绍了如何在vue3中同时使用tsx与setup语法糖,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • 利用Vue3指令实现水印背景详解

    利用Vue3指令实现水印背景详解

    这篇文章主要为大家介绍了利用Vue3指令实现水印背景详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue3.2 setup语法糖及Hook函数基本使用

    Vue3.2 setup语法糖及Hook函数基本使用

    这篇文章主要为大家介绍了Vue3.2 setup语法糖及Hook函数基本使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论