亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

調用組件時的競爭條件

調用組件時的競爭條件

慕田峪7331174 2022-05-26 16:52:17
我有 2 個組件正在加載到“應用程序”中,第一個組件通過進行 2 個 axios.get 調用將外部 IP 地址解析為地理地址,然后將它們(通過發射)返回給 App.vue。然后我調用“天氣”來解析從前 2 次調用到由 darksky API 返回的那個 lat/long 的一些 json 的 lat/long。有時(50-60% 的時間)我遇到了一個競爭條件,我將 0/0 發送到天氣(這是我在 App.vue 中初始化 lat/long 的內容)并且不知道如何解決它。我希望以下代碼能夠更可靠地運行。應用程序.vue<template>  <div id="app">        <img alt="Vue logo" src="./assets/logo.png">    <ip @response="onResponse" /> //Needs to finish before next line runs (has axios calls)    <Weather msg="The weather for:" :lat="lat" :long="long" :ip="ip" :city="city" :country="country"/>  </div></template><script>import Weather from './components/Weather.vue'import ip from './components/ip_resolve.vue'export default {  name: 'App',  data() {    return {      lat: 0,      long: 0,      ip: 0,      country: 0,      city: 0     }  },  components: {    Weather,    ip  },  //Accepts emitted values from ip_resolve -- needs to change values in data before Weather runs  methods: {    onResponse(event) {      this.lat = event.lat      this.long = event.long      this.ip = event.ip      this.country = event.country      this.city = event.city    }  }}</script>
查看完整描述

1 回答

?
呼如林

TA貢獻1798條經驗 獲得超3個贊

通常,您會使用 vuex 之類的東西將此模型邏輯分離到自己的模塊中,因此組件的數據流是完全單向的。


但在這種情況下,最簡單的解決方案是在 App.vuev-if="responseReady"中向組件添加指令,<Weather>以便在數據準備好之前它不會被掛載。您還需要為這個新道具添加一個布爾標志到dataand onResponse。同樣,這是快速而骯臟的解決方案。


  <Weather v-if="responseReady"  msg="The weather for:" :lat="lat" :long="long" :ip="ip" :city="city" :country="country"/>

...

  data() {

    return {

        lat: 0,

        long: 0,

        ip: 0,

        country: 0,

        city: 0,

        responseReady: false

      }

    }, 

...

    onResponse(event) {

      this.lat = event.lat

      this.long = event.long

      this.ip = event.ip

      this.country = event.country

      this.city = event.city

      this.responseReady = true;

    }


查看完整回答
反對 回復 2022-05-26
  • 1 回答
  • 0 關注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號