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

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' 
})

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

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 })
  }
}

Dann gibt es action.js

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

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
      })
    })
  }
}

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!