Vuejs2 Can'；无法从vue组件访问其他类

因此，我正在尝试为Vue应用程序设置登录页面。登录组件引用了导入的loginService.login（）函数，但是，当我测试代码时，我得到一个错误“无法读取未定义的属性'login'”。因此，我将整个loginService记录到控制台，它返回为未定义。为什么当我在webstorm中访问导入的loginService时，它可以很好地访问该服务，但当我尝试在运行时使用它时，它是未定义的？以下是（压缩）登录组件：

<div class="text-center py-4 mt-3 mb-1">
                        <button class="btn btn-primary " type="submit"  style="width:300px" @click="login">Login</button>
                    </div>
<script>
import {router} from '../../../main'

import { LoginService } from '../login/loginService';
import { StateStorageService } from '../auth/stateStorageService';
import toastr from 'toastr'

export default {
    name:'login',
    loginService: new LoginService(),
    stateStorageService: StateStorageService,
data: function() {
    return {
        authenticationError: false,
        password: '',
        rememberMe: false,
        username: '',
        credentials: {}
    }
},
methods:{

    login() {
        this.loginService.login({
            username: this.username,
            password: this.password,
            rememberMe: this.rememberMe
        }).then(() => {
            this.authenticationError = false;
            if (router.url === '/register' || (/^\/activate\//.test(router.url)) ||
                (/^\/reset\//.test(this.router.url))) {
                router.navigate(['']);
            }
            const redirect = StateStorageService.getUrl();
            if (redirect) {
                this.stateStorageService.storeUrl(null);
                this.router.push('/search');
            }
        }).catch(() => {
            this.authenticationError = true;
        });
    },

---

login

方法上下文中的

this

是当前Vue实例，它与此文件中导出的基本对象不同。该基本对象包含Vue实例的构造函数的所有信息，但传递的属性不会直接映射到生成的Vue实例

为了使属性在

此

上可用，您应该在

数据

函数中返回的对象上设置属性，而不是在要导出的基本对象上设置属性

因此，对于您的

loginService

和

stateStorageService

属性：

data: function() {
  return {
    loginService: new LoginService(),
    stateStorageService: StateStorageService,
    authenticationError: false,
    password: '',
    rememberMe: false,
    username: '',
    credentials: {}
  }
},

---

但是，您也不需要在Vue实例上设置

loginService

属性，就可以在

login

方法中访问它。您只需在导出对象的范围之外实例化一个新的

LoginSevice

，然后在Vue方法中引用它：

import { LoginService } from '../login/loginService';
const loginService = new LoginService();

export default {
  ...
  methods: {
    login() {
      loginService.login({ 
        ...
      })
    },
  },
}

import { LoginService } from '../login/loginService';
const loginService = new LoginService();

export default {
  ...
  methods: {
    login() {
      loginService.login({ 
        ...
      })
    },
  },
}