vue implémente la mise à jour rapide de la liste après avoir cliqué sur le bouton suivre-js tutoriel-php.cn

vue implémente la mise à jour rapide de la liste après avoir cliqué sur le bouton suivre

不言

Libérer： 2018-07-05 17:42:21

original

2162 Les gens l'ont consulté

Cet article présente principalement l'implémentation de vue pour mettre à jour la liste à temps après avoir cliqué et suivi. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Comme le montre l'image, je souhaite mettre à jour la liste avec la dernière liste à temps après avoir cliqué sur "Suivre".

L'idée est très simple, principalement deux points :

1. Après avoir cliqué sur suivre, exécutez une action pour demander une nouvelle liste de suivi

2. watch surveille la liste suivie et la liste de surveillance recommandée

Le code principal est le suivant :

Composant :

Méthodes suivantes :

followMethod(item){          
if(this.token){            
this.$store.dispatch(&#39;follow&#39;,{followUserId:item.pubId,page:this.page,size:this.size});            this.$set(item,"followStatus",true);//            this.$store.dispatch(&#39;refreshFollowList&#39;,{page:0,size:this.size});
          }else{
            Toast({
              message: "请先登录",
              duration: 800
            });
            setTimeout(function () {              this.$router.push(&#39;/login&#39;);
            },800)
          }
      },

Copier après la connexion

watch :

followList(curVal, oldVal){
        console.log(curVal)
      },
      userFollowList(curVal, oldVal){
        console.log(curVal)
      },

Copier après la connexion

fichier du module de liste followList.js vuex :

action :

follow({dispatch,commit},payload){
    axios({
      method:"post",
      url:"web/follow/add",
      headers: {&#39;w-auth-token&#39;: Cookies.get(&#39;token&#39;)},
      params:{
        page:payload.page,
        size:payload.size
      },
      data:{
        followUserId:payload.followUserId
      }
    }).then((res) => {
      Toast("关注成功");      return dispatch(&#39;refreshFollowList&#39;)
    }).catch((error) => {
      Toast("关注出错，请重试！");
    });
  }

Copier après la connexion

refreshFollowList({state,commit}){    if(token){
      axios.all([
        axios({
          method:"get",
          url:"web/pub/recommend",
          headers: {&#39;w-auth-token&#39;: token},
        }),
        axios({
          method:"get",
          url:"web/pub/list_pub_and_top_news",
          headers: {&#39;w-auth-token&#39;: Cookies.get(&#39;token&#39;)},
        })
      ]).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);
      });
    }
  },

Copier après la connexion

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

Copier après la connexion

C'est tout pour cet article L'intégralité du contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction au plug-in de chargement paresseux basé sur Vue, vue-view-lazy

Vue+mui implémente localement Cache de traitement d'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!