詳解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 || ""
    Promise.all([
      this.getArticleList({
        id: id,
        page: page
      })
    ]).then(() => {
      this.$nextTick(function () {
        // balabala
      })
    })
  }
}

相關推薦：

學會簡單的vuex與模組化

#Vuex提升學習分享

關於Vuex的全家桶狀態管理

以上是詳解Vue + Vuex 使用 vm.$nextTick實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！