Vue Vuex使用 vm.$nextTick 详解Vue + Vuex 怎样使用 vm.$nextTick
M.M.F 人气:0想了解详解Vue + Vuex 怎样使用 vm.$nextTick的相关内容吗,M.M.F在本文为您仔细讲解Vue Vuex使用 vm.$nextTick的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vuex,vm.$nextTick,vm.$nextTick,Vue,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 }) }) } }
加载全部内容