關於Nuxt.js中axios獲取後端數據會報錯的巨坑分析

搞了一個上午彷佛才弄懂是哪裏的原因。

先說一下問題，很簡單，就是axios得不到數據，各種各樣的報錯。開始我以爲是因爲第一次使用類似"async""await"等異步獲取數據的方法的原因，但是一時又想不到怎麼使用同步獲取數據的辦法驗證，所以一直在查關於"asyncData"的使用方法，故而誤入歧途。

看一下各種修改時報錯的聲明，美輪美奐

_nuxt_axios__WEBPACK_IMPORTED_MODULE_0__.default.get is not a function

其實這就說的是找不到axios.get方法嘛，然而我當時就是覺得axios配置好了，找不到應該不是axios的問題。

inject is not a function:
  inject('axios', axios)

inject雖然我不知道是啥，但是在axios.js裏面可以找得到報錯的這句代碼，這有一次說明了axios配置出現了問題，然而我就是抱着axios絕對沒事的直覺，，又一次錯過。

沒啥辦法的時候，我選擇重新創建工程，然而每次結果都是一樣的，在一點點派出了後端的錯誤，語法的錯誤，nuxt.js本身的錯誤（搞笑）之後，我終於開始質疑是axios自己的錯誤。

於是我嘗試把axios添加到"package.json"文件中去，然後引用：

  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "cross-env": "^5.2.0",
    "element-ui": "^2.4.11",
    "koa": "^2.6.2",
    "koa-router": "^7.4.0",
    "nuxt": "^2.0.0",
    "axios": "latest"
  },

<script>
import Logo from '~/components/Logo.vue'
import axios from "axios";

export default {
  components: {
    Logo
  },
  async asyncData ({}) {
    let { data } = await axios.get(`http://localhost:3000/api/info`)
    return { title: data.status }
  }
}
</script>

果然好了。

總結一下，因爲之前使用vue add，好用的我已經忘了要在package.json中配置所需要的插件。導致axios一直連接不上，今兒導致我對Nuxt.js都產生了質疑，是可忍熟不可忍，磕頭道歉。

網上關於Nuxt.js的資料確實沒有想象中那麼多，似乎大家對服務端渲染還不是那麼重視，或者什麼其他的原因，但是我是很喜歡這個工具的，希望能深入學習下去。

以上。