Vuejs從.js文件返回數據

我是Vue的新手，並且正在開發一款應用程序以從天氣api獲取天氣。
下面的代碼工作，如果我離開axios.get()在Content.vue如下所示。
我想將它移動到一個單獨的文件（WeatherAPI.js）並從那裏調用它。如果我在Content.vue中撥打電話axois.get()，並取消註釋this.todaysWeather = WeatherAPI.returnTodaysWeather();，則不起作用。我確實看到從WeatherAPI.js記錄到控制檯的數據，所以它得到它，但似乎沒有正確返回它。我在Content.vue的控制檯日誌中看到undefined。Vuejs從.js文件返回數據

Content.vue

<template> 
<div class="container-fluid"> 
    <div class="row answerRow text-center"> 
     <div class="col"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <weather-today :todaysWeather="todaysWeather"></weather-today> 
     </div> 
     <div class="col"> 
      Column2 
     </div> 
    </div> 
</div> 
</template> 

<script> 
import Today from '../weather/Today.vue' 
import WeatherAPI from '../data/WeatherAPI.js' 
import axios from 'axios' 
const apiURL = "http://api.openweathermap.org/data/2.5/weather"; 
const apiKey = "MyKeyHere"; 
const zipCode = "11111,us"; 
const dailyWeatherUrl = apiURL + "?zip=" + zipCode + "&appid=" + apiKey; 
export default { 
    mounted(){ 
     this.getTodaysWeather(); 
     console.log(this.todaysWeather) 
    }, 
    data() { 
     return { 
      todaysWeather: {name: "testname"} 
     } 
    }, 
    components: { 
     'weather-today': Today 
    }, 
    methods: { 
     getTodaysWeather() { 
      //this.todaysWeather = WeatherAPI.returnTodaysWeather();    
      axios.get(dailyWeatherUrl) 
       .then((response) => { 
        console.log(response.data); 
        this.todaysWeather = response.data; 
       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 


     } 
    } 
} 
</script> 

<style> 
.answerRow{ 
    background-color: yellow; 
} 
</style>

Today.vue

<template> 
    <div class="container row1"> 
     <div class="row"> 
      <div class="col"> 
       <h2>Todays Weather</h2> 
      </div> 
     </div>    
     <div class="row"> 
      <div class="col"> 
       City: {{ todaysWeather.name }} 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
import WeatherAPI from '../data/WeatherAPI.js' 
export default { 
    props: ['todaysWeather'], 
    mounted() { 
     console.log(this.todaysWeather) 
    }  
} 
</script> 

<style> 
.row1{ 
    background-color: #3498DB; 
} 
</style>

WeatherAPI.js

const apiURL = "http://api.openweathermap.org/data/2.5/weather"; 
const apiKey = "MyKeyHere"; 
const zipCode = "11111,us"; 
const dailyWeatherUrl = apiURL + "?zip=" + zipCode + "&appid=" + apiKey; 

import axios from 'axios'; 
export default { 
    data(){ 
    return { 
     todaysWeather: {} 
    } 
    }, 
    returnTodaysWeather() { 
     axios.get(dailyWeatherUrl) 
     .then((response) => { 
      console.log(response.data); 
      this.todaysWeather = response.data; 
      console.log(this.todaysWeather); 
      return this.todaysWeather; 
     }) 
     .catch(function (error) { 
      console.log(error); 
     }); 
    } 


}

來源

2017-09-15 Jrow

你WeatherAPI.js文件確實不應該有任何與Vue公司，它應該只是一個包含與天氣API交互的方法的文件。

WeatherAPI.js

const apiURL = "http://api.openweathermap.org/data/2.5/weather"; 
const apiKey = "MyKeyHere"; 
const zipCode = "11111,us"; 
const dailyWeatherUrl = apiURL + "?zip=" + zipCode + "&appid=" + apiKey; 

import axios from 'axios'; 

export function returnTodaysWeather() { 
    return axios.get(dailyWeatherUrl) 
      .then(response => response.data) 
}

注意，這個函數返回一個承諾。我們稍後會使用它。此外，該代碼直接導出函數。如果你願意，你可以用不同的方式導出一個具有與API交互的多個函數的對象。

現在在Content.vue所有你需要做的就是導入你想使用的天氣API。

Content.vue

// import the returnTodaysWeather function from the api file 
import { returnTodaysWeather } from '../data/WeatherAPI.js' 

export default { 
    mounted(){ 
     this.getTodaysWeather(); 
     console.log(this.todaysWeather) 
    }, 
    data() { 
     return { 
      todaysWeather: {name: "testname"} 
     } 
    }, 
    components: { 
     'weather-today': Today 
    }, 
    methods: { 
     getTodaysWeather() { 
      // The API returns a promise. In the callback from the 
      // promise, we can set the Vue's data with the results 
      // of the call to the API 
      returnTodaysWeather().then(weather => this.todaysWeather = weather)   
     } 
    } 
}

我刪除了錯誤處理，但在生產中顯然想從API catch錯誤。

來源

2017-09-15 19:38:50 Bert

Vuejs從.js文件返回數據

回答

相關問題