快捷導(dǎo)航

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

更新時(shí)間：2017年11月20日 16:51:44 作者：M.M.F

這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

vm.$nextTick

簡單說，因?yàn)镈OM至少會(huì)在當(dāng)前tick里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數(shù)據(jù)后并且DOM更新后再執(zhí)行，要保證在DOM更新以后再執(zhí)行某一塊代碼，就必須把這塊代碼放到下一次事件循環(huán)里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會(huì)立即執(zhí)行這塊代碼。

//改變數(shù)據(jù) 
vm.message = 'changed' 
 
//想要立即使用更新后的DOM。這樣不行，因?yàn)樵O(shè)置message后DOM還沒有更新 
console.log(vm.$el.textContent) // 并不會(huì)得到'changed' 
 
//這樣可以，nextTick里面的代碼會(huì)在DOM更新后執(zhí)行 
Vue.nextTick(function(){ 
  console.log(vm.$el.textContent) //可以得到'changed' 
})

vm.$nextTick 的作用是將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。

正常在 ready/mounted 中獲取數(shù)據(jù), 那么操作是很簡單的

ready() { // vue2 為 mounted() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
    this.$nextTick(function () {
      // balabala
    })
  });
}

如果是用 vuex 的話, 由于vuex的數(shù)據(jù)操作都在 action 和 mutations, 然后在 ready/mounted 中調(diào)用 action 里的函數(shù), 那么這時(shí)候該怎么用 vm.$nextTick 呢?

這時(shí)候我們就需要用到 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, 這樣就可以返回一個(gè)Promise對(duì)象

最后是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
      })
    })
  }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中CSS?scoped的原理詳細(xì)講解
在組件中增加的css加了scoped屬性之后,就在會(huì)在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下
2023-01-01
Vue3中jsoneditor的使用示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue3中jsoneditor的使用相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解下
2024-01-01
vue3中覆蓋組件樣式的方法小結(jié)
在 Vue 3 中,覆蓋組件樣式的方法與 Vue 2 相似,但由于 Vue 3 更多地依賴于 CSS 的模塊化,一些最佳實(shí)踐可能會(huì)有所不同,下面就跟隨小編一起來了解一下吧
2024-04-04
對(duì)vue中methods互相調(diào)用的方法詳解
今天小編就為大家分享一篇對(duì)vue中methods互相調(diào)用的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
解決Vue項(xiàng)目Network:?unavailable的問題
項(xiàng)目只能通過Local訪問而不能通過Network訪問,本文主要介紹了解決Vue項(xiàng)目Network:?unavailable的問題,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-06-06
vue3路由配置以及路由跳轉(zhuǎn)傳參詳解
路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境
這篇文章主要介紹了vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
element-ui中有詳細(xì)的各種表格及表格方法,下面這篇文章主要給大家介紹了關(guān)于Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-01-01
Vue echarts 實(shí)現(xiàn)離線中國地圖的示例代碼(細(xì)化到省份)
這篇文章主要介紹了Vue echarts 實(shí)現(xiàn)離線中國地圖,細(xì)化到省份,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09