第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue/Vuex - 兩個或多個具有異步調(diào)度(ajax)的組件

Vue/Vuex - 兩個或多個具有異步調(diào)度(ajax)的組件

拉丁的傳說 2021-10-14 13:24:28
我使用 vuex 并有一個商店模塊來加載我的應(yīng)用程序中的例如用戶列表(用于選擇等)。它使用 ajax 和加載列表后,不再執(zhí)行此操作(如果列表存在于 vuex 存儲中)。我在主應(yīng)用程序布局中這樣做,但以異步方式即沒有等待,沒有阻塞。Ajax 請求在 vuex dispatch action 中?!凹虞d用戶”。某些頁面(例如 /users-list)需要來自此用戶列表的數(shù)據(jù),也稱為“l(fā)oadUsers”,但以其他方式 - 使用等待,加載后渲染頁面以避免任何問題。一切正常,如果用戶打開主頁面(/)然后轉(zhuǎn)到用戶列表(/users-lists),但是如果我們嘗試直接打開用戶列表,作為瀏覽器的第一頁,“l(fā)oadUsers”被調(diào)用兩次 - 一次從主布局,第二個來自用戶列表頁面。問題是,如何處理這個,只加載一次列表?它將在布局中調(diào)用,因此,來自用戶列表頁面的第二次調(diào)用也應(yīng)該等待結(jié)果。但是如何做到這一點呢?代碼位于不同的文件中,我不確定如何執(zhí)行此操作。也在 vuex 上保存來自 ajax 調(diào)用的承諾,并將其返回給其他調(diào)用?在時間線中,它現(xiàn)在看起來:加載布局 -> 調(diào)用獲取列表 -> 待處理的 ajax加載用戶列表 > 調(diào)用獲取列表 - > 待處理的 ajax從布局中獲取ajax從用戶列表中獲取ajax呈現(xiàn)用戶列表
查看完整描述

2 回答

?
交互式愛情

TA貢獻(xiàn)1712條經(jīng)驗 獲得超3個贊

我今天在 vuex 中使用保存承諾測試了這個,它完美地工作。例子:


async loadUsers ({ state, commit }) {

  if (state.users.length) {

   return state.users

  }  


  if (state.fetchPromise) {

    return state.fetchPromise

  }


  let promise = fetch(usersUrl).then((response) => {

    commit('SET_USERS', response.data)

  })


  commit('SET_PROMISE', promise);

  return promise

}

現(xiàn)在可以在許多完全獨立的組件中使用它,而無需多次調(diào)用 request 并且不會破壞任何東西。例如它在主布局上運行它:


created () {

  this.$store.dispatch('users/loadUsers')

}

它是在沒有等待的情況下調(diào)用的,因此是異步的并且不會阻止渲染頁面。但是在用戶列表頁面上,此列表是必需的,因此我們可以在這里放置:


async beforeMount () {

   await this.$store.dispatch('users/loadUsers')

}

結(jié)果: loadUsers 將被分派兩次 - 一次來自布局,第二次來自用戶列表,但它只會發(fā)送請求一次。此外,用戶列表將正確等待響應(yīng),而不是嘗試呈現(xiàn)沒有數(shù)據(jù)的內(nèi)容。


查看完整回答
反對 回復(fù) 2021-10-14
?
鴻蒙傳說

TA貢獻(xiàn)1865條經(jīng)驗 獲得超7個贊

我不得不處理類似的事情,這就是我解決它的方法:


在您的主文件中,定義一個新的狀態(tài)變量,稱為pending。你可以在你的loadUsers操作中使用它:


async loadUsers ({ state, commit }) {

  if (state.users.length) {

   return state.users;

  }  


  if (state.isPending) {

    return;

  }


  commit('SET_PENDING_STATE', true);


  const users = await fetch(usersUrl);


  commit('SET_PENDING_STATE', false);

  commit('SET_USERS', users);

}


查看完整回答
反對 回復(fù) 2021-10-14
  • 2 回答
  • 0 關(guān)注
  • 278 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號