vue-axiosを使ってapiをたたこうとしてもエラーになる

Question

vue-axiosというラッパーを使ってvueからapiをたたこうとしたのですが以下のようなエラーが出てしまいます

[Vue warn]: Unhandled error during execution of native event handler


Uncaught TypeError: Cannot read properties of undefined (reading 'get')

vueのバージョンは3で、vue-axiosの公式の通りにコードを書いているつもりなのですが......
以下がコンポーネント内のapiを実行する関数で

getlist(){
            this.info="取得中"
            this.axios.get("OOOOO").then((response)=>{this.info=response.data}).catch(alert("ERROR"))
            
        }

以下がmain.jsのコードです。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(router,VueAxios,axios)
app.mount('#app')

catchのエラーも出ないので書き方自体が違うのだと思いますが、いったい何がダメなのでしょうか

Answer 1

getlistの中でthis.axiosを出力してみてください。undefinedになってませんか？

getlist() {
  console.log({ axios: this.axios }); // undefinedになってませんか？

  this.info = "取得中";

  this.axios.get("OOOOO").then((response) => {
    this.info = response.data;
  }).catch((err) => {
    alert("ERROR");
  });
}

追記

routerを使っているときの書き方はまた変わってくるのでしょうか

app.useの使い方が良くないのではないでしょうか。

use()メソッドは 2 つのパラメータを引数に取ります。まず、第 1 引数はインストールするプラグインです
（中略）
第 2 引数はオプションで、それぞれのプラグインに依存します。

プラグイン | Vue.js

app.useは引数が2つのようで、複数のプラグインを一度に指定できないようなので、

app.use(router,VueAxios,axios)

ではなく、

app.use(router);
app.use(VueAxios, axios);

と書くのが正しいのかもしれません。
vue-axios公式のチュートリアルでも引数は2つでした。

Usage in Vue 3:

const app = Vue.createApp(...)
app.use(VueAxios, axios)

imcvampire/vue-axios: A small wrapper for integrating axios to Vuejs

Comments

[Sobasenbei]

なってます。
routerで分かれた先のコンポーネントに書いているので、routerを使っているときの書き方はまた変わってくるのでしょうか

[KAOsaka]

回答追記しました。

[Sobasenbei]

正常に動作しました！
ありがとうございます