本文主要介绍了详解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 || ""
promise.all([
this.getarticlelist({
id: id,
page: page
})
]).then(() => {
this.$nexttick(function () {
// balabala
})
})
}
}
相关推荐：
学会简单的vuex与模块化
vuex提升学习篇分享
关于vuex的全家桶状态管理
以上就是详解vue + vuex 使用 vm.$nexttick实例详解的详细内容。