Can't access another class from vue component - vuejs2

Question

So I'm trying to set up a login page for a Vue application. The login component references the imported loginService.login() function, however, when I test the code I get an error "Cannot read property 'login' of undefined." So I logged the entire loginService to the console and it came back as undefined. Why is it that when I access the imported loginService in webstorm it can access the service just fine, but when I try to use it at runtime it's undefined? Here is the (condensed) login component:
<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;
});
},
And here is the 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

The this in the context of your login method is the current Vue instance, which isn't the same as the base object being exported in this file. That base object contains all of the info for the constructor for the Vue instance, but the properties being passed don't get directly mapped to the generated Vue instance.
In order to make a property available on this like you want, you should set it on the object returned in the data function, not the base object being exported.
So for your loginService and stateStorageService properties:
data: function() {
return {
loginService: new LoginService(),
stateStorageService: StateStorageService,
authenticationError: false,
password: '',
rememberMe: false,
username: '',
credentials: {}
}
},
But, you also don't need to set the loginService property on the Vue instance to have access to it in your login method. You can simply instantiate a new LoginSevice outside of the scope of your exported object and then reference that in your Vue method:
import { LoginService } from '../login/loginService';
const loginService = new LoginService();
export default {
...
methods: {
login() {
loginService.login({
...
})
},
},
}