找不到功能从进口模块

Question

首先感谢提前反馈。 由于我是es6和vuejs的新手，我开始在整个应用程序中使用导入的服务模块时遇到问题。最终目标是将使用Axios的所有内容都移动到一个BaseService。

[Vue warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0__services_AuthService__.a.getCurrentUser is not a function" 

AuthService.js

import BaseService from './BaseService' 

export default class AuthService { 

    setCurretUser(user) 
    { 
    localStorage.setItem("currentUser", user); 
    } 

    getCurrentUser() 
    { 
    return localStorage.getItem("currenUser"); 
    } 

} 

App.vue

import Axios from 'axios' 
import Navbar from './partials/Navbar' 
import Sidebar from './partials/Sidebar' 
import AuthService from '../services/AuthService' 

export default { 
    name: 'app', 
    components: { 
    Navbar, 
    Sidebar 
    }, 
    mounted() { 
    console.log('Component mounted.') 
    }, 
    created() { 
    Axios.get('api/user') 
     .then(function (response) { 
     AuthService.setCurrentUser(response.data); 
     console.log(response); 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
    } 
} 

Answer 1

如果你要使用AuthService类作为方法的容器，将它们转换为static，使他们可以被称为没有实例化该类（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Static_methods）

export default class AuthService { 

    static setCurretUser(user) 
    { 
    localStorage.setItem("currentUser", user); 
    } 

    static getCurrentUser() 
    { 
    return localStorage.getItem("currenUser"); 
    } 

} 

或者你也可以包含在他们的对象：

export default { 

    setCurretUser(user) 
    { 
    localStorage.setItem("currentUser", user); 
    }, 

    getCurrentUser() 
    { 
    return localStorage.getItem("currenUser"); 
    } 

}