Vue warn]を解決する。Vueの警告]: Error in created hook: "ReferenceError: axios is not defined "問題を解決する。

axiosがvueで定義されていないことを正しく解決する。

axiosはすでにインストールされています

vueを学習中、フロントエンドがバックエンドのデータを要求すると、ブラウザで次のようなエラーが発生します。

main.jsの下

import VueAxios from 'vue-axios';
import axios from 'axios';

使用したnpmのサンプルのコードは以下の通りです。

created(){
    const _this = this
    axios.get('http://localhost:8081/book/findall').then(function (resp) {
        _this.books = resp.data;
      })
  }
}

webpack-internal:///. /node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Error in created hook: "ReferenceError: axios is not defined"
found in
---> <Book> at src/components/Book.vue
   <App> at src/App.vue
     <Root>
     warn @ webpack-internal:///. /node_modules/vue/dist/vue.esm.js:629

リクエスト時に以下のようなブラウザエラーが発生します。

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.prototype.$axios = axios;

created(){
    const _this = this
    this.$axios.get('http://localhost:8081/book/findall').then(function (resp) {
        _this.books = resp.data;
      })
  }
}

ソリューション

main.jsの下で、次のように変更します。

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.prototype.$axios = axios;

例のコードは次のように変更されました。

created(){
    const _this = this
    this.$axios.get('http://localhost:8081/book/findall').then(function (resp) {
        _this.books = resp.data;
      })
  }
}

変更後、この問題を解決するには、次のように実行します。