Explication détaillée de Vue + Vuex en utilisant l'instance vm.$nextTick

Cet article présente principalement l'explication détaillée de la façon d'utiliser vm.$nextTick dans Vue + Vuex. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

vm.$nextTick

En termes simples, car le DOM sera au moins mis à jour une fois que tous les codes du tick actuel seront exécutés. Par conséquent, il est impossible de l'exécuter après la modification des données et la mise à jour du DOM. Pour garantir qu'un certain morceau de code est exécuté après la mise à jour du DOM, ce morceau de code doit être placé dans la boucle d'événement suivante, telle que setTimeout. (fn, 0), De cette façon, après la mise à jour du DOM, ce code sera exécuté immédiatement.

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

La fonction de vm.$nextTick est de retarder le rappel jusqu'au prochain cycle de mise à jour du DOM.

Récupérez les données normalement dans prêt/monté, alors l'opération est très simple

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

Si vous utilisez vuex, car vuex Le les opérations de données sont toutes dans des actions et des mutations, puis les fonctions dans l'action sont appelées dans ready/mounted Alors comment utiliser vm.$nextTick à ce moment ?

À ce stade, nous devons utiliser Promise, spécifiquement Le code est le suivant :

La page d'accueil est api.js

export default {
  getFromConfig(config) {
    return $.ajax({ data: config })
  }
}

Ensuite, il y a action.js

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

Assurez-vous d'ajouter return ici, afin de pouvoir renvoyer un objet Promise

Enfin, le composant vue

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

Recommandations associées :

Apprendre le Vuex simple et la modularisation

Apprentissage par amélioration de Vuex partage d'articles

À propos de la gestion du statut du bucket familial de Vuex

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!