Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erklärung von Vue + Vuex mit der vm.$nextTick-Instanz

小云云
Freigeben: 2018-01-16 10:24:52
Original
2241 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die detaillierte Erklärung zur Verwendung von vm.$nextTick in Vue + Vuex vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

vm.$nextTick

Einfach ausgedrückt, weil das DOM zumindest aktualisiert wird, nachdem alle Codes im aktuellen Tick ausgeführt wurden. Daher ist eine Ausführung nach der Änderung der Daten und der Aktualisierung des DOM nicht möglich. Um sicherzustellen, dass ein bestimmter Codeabschnitt nach der Aktualisierung des DOM ausgeführt wird, muss dieser Codeabschnitt in die nächste Ereignisschleife eingefügt werden, z. B. setTimeout (fn, 0), Auf diese Weise wird dieser Code nach der Aktualisierung des DOM sofort ausgeführt.

//改变数据 
vm.message = 'changed' 
 
//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新 
console.log(vm.$el.textContent) // 并不会得到'changed' 
 
//这样可以,nextTick里面的代码会在DOM更新后执行 
Vue.nextTick(function(){ 
  console.log(vm.$el.textContent) //可以得到'changed' 
})
Nach dem Login kopieren

Die Funktion von vm.$nextTick besteht darin, den Rückruf bis zum nächsten DOM-Aktualisierungszyklus zu verzögern.

Laden Sie die Daten normalerweise in „Ready/Mounted“ ab, dann ist der Vorgang sehr einfach

ready() { // vue2 为 mounted() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
    this.$nextTick(function () {
      // balabala
    })
  });
}
Nach dem Login kopieren

Wenn Sie vuex verwenden, weil vuex The Datenoperationen befinden sich alle in Aktionen und Mutationen, und dann werden die Funktionen in der Aktion als bereit/gemountet aufgerufen. Wie verwendet man also vm.$nextTick zu diesem Zeitpunkt?

Zu diesem Zeitpunkt müssen wir Promise verwenden. Im Einzelnen lautet der Code wie folgt:

Die Startseite ist api.js

export default {
  getFromConfig(config) {
    return $.ajax({ data: config })
  }
}
Nach dem Login kopieren

Dann gibt es action.js

export const getArticleList = ({dispatch}, config) => {
  return api.getFromConfig(config).then(({data}) => {
    dispatch(types.RECEIVE_ARTICLE, data, config.page)
  })
}
Nach dem Login kopieren

Stellen Sie sicher, dass Sie hier return hinzufügen, damit Sie ein Promise-Objekt zurückgeben können

Schließlich die Vue-Komponente

methods: {
  loadMore(page = this.page) {
    var id = this.$route.params.id || ""
    Promise.all([
      this.getArticleList({
        id: id,
        page: page
      })
    ]).then(() => {
      this.$nextTick(function () {
        // balabala
      })
    })
  }
}
Nach dem Login kopieren

Verwandte Empfehlungen:

Einfaches Vuex und Modularisierung lernen

Vuex-Verbesserungslernen Teilen von Artikeln

Über die Familien-Bucket-Statusverwaltung von Vuex

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von Vue + Vuex mit der vm.$nextTick-Instanz. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!