详解Vue + Vuex 如何使用 vm.$nextTick

详解Vue + Vuex 如何使用 vm.$nextTick

vm.$nextTick

简单说，因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行，要保证在DOM更新以后再执行某一块代码，就必须把这块代码放到下一次事件循环里面，比如setTimeout(fn, 0)，这样DOM更新后，就会立即执行这块代码。

//改变数据

vm.message = 'changed'

//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新

console.log(vm.$el.textContent) // 并不会得到'changed'

//这样可以，nextTick里面的代码会在DOM更新后执行

vue.nextTick(function(){

console.log(vm.$el.textContent) //可以得到'changed'

})

vm.$nextTick 的作用是将回调延迟到下次 DOM 更新循环之后执行。

正常在 ready/mounted 中获取数据, 那么操作是很简单的

ready() { // vue2 为 mounted() {

var request = $.ajax({

type: "POST",

dataType: 'json',

url: "api.php"

});

request.then((json) => {

// balabala

this.$nextTick(function () {

// balabala

})

});

}

如果是用 vuex 的话, 由于vuex的数据操作都在 action 和 mutations, 然后在 ready/mounted 中调用 action 里的函数, 那么这时候该怎么用 vm.$nextTick 呢?

这时候我们就需要用到 Promise 了, 具体代码如下:

首页是api.js

export default {

getFromConfig(config) {

return $.ajax({ data: config })

}

}

然后是action.js

export const getArticleList = ({dispatch}, config) => {

return api.getFromConfig(config).then(({data}) => {

dispatch(types.RECEIVE_ARTICLE, data, config.page)

})

}

这里一定要加上return, 这样就可以返回一个Promise对象

最后是vue组件

methods: {

loadMore(page = this.page) {

var id = this.$route.params.id || "WjeWipIBCs"

Promise.all([

this.getArticleList({

id: id,

page: page

})

]).then(() => {

this.$nextTick(function () {

// balabala

})

})

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。