【Vue.js】axiosで「TypeError: Cannot read property 'post' of undefined」エラーの原因と対処方法！

あきぞらです。

Vue.jsが好きでよく開発をしています。

ある時、Vue.jsでaxiosを使おうとしたときに、ブラウザのコンソールで

以下のようなエラーが発生してしまいました。

TypeError: Cannot read property 'post' of undefined

axiosを使用している箇所の実装は以下のようなコードでした。

import { axios } from 'axios'

export default {
    mounted: function(){
        const data = { //何かしらデータ };
        axios.post('https://api.akizora.com/v1/api/test', data)
            .then((res) => {
                console.log(res.data)
             })
             .catch((err) => {
                 console.log(err)
             })
    }
}

axios がうまく読み込んでくれていないようです。

原因

TypeScriptっぽくaxiosをインポートしていたために、うまく読み込んでくれなかったようです。

以下を修正すれば解決です。

// これを
import { axios } from 'axios'
↓
// こう直す
import axios from 'axios'

しょうもない凡ミスですが、コピペばかりしていると痛い目をみます…。