Maison >interface Web >js tutoriel >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!