详解Vue+Vuex使用vm.$nextTick实例详解

vm.$nextTick

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

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

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

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

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

首页是api.js

然后是action.js

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

最后是vue组件

相关推荐：

学会简单的vuex与模块化

Vuex提升学习篇分享

关于Vuex的全家桶状态管理

以上就是详解Vue + Vuex 使用 vm.$nextTick实例详解的详细内容，更多请关注Gxl网其它相关文章！