Vue.js - 未捕獲的（以諾）類型錯誤：__WEBPACK_IMPORTED_MODULE_0__services_Api__.a.post不是一個函數

Question

每次我點擊註冊按鈕，我得到這個錯誤：

未捕獲的（以諾）類型錯誤：__WEBPACK_IMPORTED_MODULE_0__services_Api __一個。帖子是不是一個函數

的AuthenticationService.js具有下面的代碼：

import Api from '@/services/Api' 
 

 
export default { 
 
    register (credentials) { 
 
    return Api.post('register', credentials) 
 
    } 
 
}

個

Api.js具有下面的代碼：

import axios from 'axios' 
 

 
export default() => { 
 
    return axios.create({ 
 
    baseURL: `http://localhost:8081/` 
 
    }) 
 
}

這是app.js的代碼：

console.log('Sup?') 
 
const express = require('express') 
 
const bodyParser = require('body-parser') 
 
const cors = require('cors') 
 
const morgan = require('morgan') 
 

 
const app = express() 
 
app.use(morgan('combined')) 
 
app.use(bodyParser.json()) 
 
app.use(cors()) 
 

 
app.post('/register', (req, res) => { 
 
    res.send({ 
 
    message: `${req.body.email} Registered!` 
 
    }) 
 
}) 
 

 
app.listen(process.env.PORT || 8081)

Register.vue具有此代碼：

<template> 
 
    <div> 
 
    <h1>Register</h1> 
 
    <input 
 
     type="email" 
 
     name="email" 
 
     v-model="email" 
 
     placeholder="email"/> 
 
    <br> 
 
    <input 
 
     type="password" 
 
     name="password" 
 
     v-model="password" 
 
     placeholder="password"/> 
 
    <br> 
 
    <button @click="register"> 
 
     Register 
 
    </button> 
 
    </div> 
 
</template> 
 

 
<script> 
 
import AuthenticationService from '@/services/AuthenticationService' 
 
export default { 
 
    data() { 
 
    return { 
 
     email: '', 
 
     password: '' 
 
    } 
 
    }, 
 
    methods: { 
 
    async register() { 
 
     await AuthenticationService.register({ 
 
     email: this.email, 
 
     password: this.password 
 
     }) 
 
     console.log('done!') 
 
    } 
 
    } 
 
    // watch: { 
 
    // email (value) { 
 
    //  console.log('email changed: ', value) 
 
    // } 
 
    // } 
 
} 
 
</script>

Index.js具有這樣的：

import Vue from 'vue' 
 
import Router from 'vue-router' 
 
import HelloWorld from '@/components/HelloWorld' 
 
import Register from '@/components/Register' 
 

 
Vue.use(Router) 
 

 
export default new Router({ 
 
    routes: [ 
 
    { 
 
     path: '/', 
 
     name: 'Hello', 
 
     component: HelloWorld 
 
    }, 
 
    { 
 
     path: '/register', 
 
     name: 'register', 
 
     component: Register 
 
    } 
 
    ] 
 
})

層次結構是如下：Project Hierarchy

，您可以在此鏈接獲得這個項目： VueDev

Answer 1

我有同樣的問題 我猜問題是在這裏：

import Api from '@/services/Api' 

export default { 
register (credentials) { 
    return Api.post('register', credentials) 
} 
} 

但應該有：

import Api from '@/services/Api' 

export default { 
    register (credentials) { 
    return Api().post('register', credentials) 
    } 
} 

Answer 2

嘗試導出實例本身，而不是一個函數：

import axios from 'axios' 

const instance = axios.create({ 
    baseURL: `http://localhost:8081/` 
}) 

export default instance