时间戳

首页 > 解决方案 > 无法从 vue 组件访问另一个类

vuejs2 - 无法从 vue 组件访问另一个类

问题描述

所以我正在尝试为 Vue 应用程序设置登录页面。登录组件引用了导入的 loginService.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;
        });
    },

这是 loginService.js

import { Principal } from '../auth/principalService';
import { AuthServerProvider } from '../auth/authJwtService';


export class LoginService {

    constructor() {
        this.principal = new Principal();
        this.authServerProvider = new AuthServerProvider();
    }

    login(credentials, callback) {
        const cb = callback || function() {};

        return new Promise((resolve, reject) => {
            this.authServerProvider.login(credentials).subscribe((data) => {
                this.principal.identity(true).then((account) => {
                    resolve(data);
                });
                return cb();
            }, (err) => {
                this.logout();
                reject(err);
                return cb(err);
            });
        });
    }

标签： vuejs2es6-class

解决方案

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

为了使属性在this您想要的状态下可用，您应该在data函数中返回的对象上设置它，而不是在导出的基础对象上。

因此，对于您的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({ 
        ...
      })
    },
  },
}

推荐阅读