Question

因此，我试图为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;
        });
    },

这是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);
            });
        });
    }

Answer 1

您的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({ 
        ...
      })
    },
  },
}

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

1 个答案: