Heim > Web-Frontend > js-Tutorial > vue implementiert eine zeitnahe Aktualisierung der Liste nach dem Klicken auf die Schaltfläche „Folgen'.

vue implementiert eine zeitnahe Aktualisierung der Liste nach dem Klicken auf die Schaltfläche „Folgen'.

不言
Freigeben: 2018-07-05 17:42:21
Original
2162 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Implementierung von vue vor, um die Liste rechtzeitig zu aktualisieren, nachdem ich auf „Folgen“ geklickt habe. Jetzt kann ich ihn mit Ihnen teilen

Wie im Bild gezeigt, möchte ich die Liste rechtzeitig nach dem Klicken auf „Folgen“ auf die neueste Liste aktualisieren.

Die Idee ist sehr einfach, hauptsächlich zwei Punkte:

1 Nachdem Sie auf „Folgen“ geklickt haben, führen Sie eine Aktion aus, um eine neue Folgeliste anzufordern.

2 watch überwacht die folgende Liste und die empfohlene Beobachtungsliste

Der Hauptcode lautet wie folgt:

Komponente:

Folgende Methoden:

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)
          }
      },
Nach dem Login kopieren

watch:

followList(curVal, oldVal){
        console.log(curVal)
      },
      userFollowList(curVal, oldVal){
        console.log(curVal)
      },
Nach dem Login kopieren

followList.js Vuex-Listenmoduldatei:

Aktion:

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("关注出错,请重试!");
    });
  }
Nach dem Login kopieren
rrree

Mutation:

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);
      });
    }
  },
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird für das Lernen aller nützlich sein. Bitte beachten Sie die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Einführung in das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy

Vue+mui implementiert lokal Bildverarbeitungs-Cache

Das obige ist der detaillierte Inhalt vonvue implementiert eine zeitnahe Aktualisierung der Liste nach dem Klicken auf die Schaltfläche „Folgen'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage