调用组件时的竞争条件

Question

我有 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>

Answer 1

通常，您会使用 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;

    }