首页 > web前端 > js教程 > vue实现点击关注之后及时更新列表

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

不言
发布: 2018-07-05 17:42:21
原创
2145 人浏览过

这篇文章主要介绍了关于vue实现点击关注之后及时更新列表,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

如图,我要实现点击关注之后列表及时更新成最新的列表。

思路很简单,主要是两点:

1、在点击关注之后去执行一个请求新的关注列表的action;

2、在vue组件中watch监听已关注列表和推荐关注列表

主要代码如下:

组件:

关注的methods:

1

2

3

4

5

6

7

8

9

10

11

12

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:

1

2

3

4

5

6

followList(curVal, oldVal){

        console.log(curVal)

      },

      userFollowList(curVal, oldVal){

        console.log(curVal)

      },

登录后复制

followList.js vuex的列表module文件:

action:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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("关注出错,请重试!");

    });

  }

登录后复制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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:

1

2

3

4

5

6

7

8

9

10

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;

  },

};

登录后复制

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

 基于Vue的延迟加载插件vue-view-lazy的介绍

Vue+mui实现图片的本地缓存

以上是vue实现点击关注之后及时更新列表的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板