Creating a single instance of a class within a Vue application Creating a single instance of a class within a Vue application vue.js vue.js

Creating a single instance of a class within a Vue application


You can just add it as a Vue instance property. It will be there for all Vue components.

Set it up in main.js like this:

Vue.prototype.$authService = new AuthService();

You can later access it in any Vue component. For example:

this.$authService.Login();

Refer:https://vuejs.org/v2/cookbook/adding-instance-properties.html

Edit:You have to use this.$router.push and this.$authService.register inside the isAuthenticated callback. If "this" refers to something else in that block, store var self=this; before the callback starts, or use fat arrow syntax.

<script>  //No import as router is available in 'this'  export default {    created(){      var self=this; //For use inside the callback      this.$authService.isAuthenticated().then(      function(result){        if(result){          self.$router.push('/');          }        else{          self.$authService.register();          }      });    }    } </script>

Edit 2:

Maybe you can create the instance (singleton) itself in a file called AuthServiceInst.js. Then you can import it in both main.js and router.js.

New file AuthServiceInst.js:

import AuthService from './AuthService.js'export const authService = new AuthService();

main.js:

import {authService} from './AuthServiceInst.js'Vue.prototype.$authService = authService;

router.js:

import {authService} from './AuthServiceInst.js'//Now you can use authService