javascript - 无法从导入的模块中找到功能

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");
  }

}