CODEWITHSUNDEEP
javascriptvue.js
Jay Robertson
Jay Robertson

Reputation: 43

Using Vue.js prototype returns undefined

I am trying to make an instance of a js service that is a class so that I can import in and use it everywhere in my project by doing so in my main.js:

import MultibaasProvider from './services/multibaas-provider'
Vue.prototype.$service = MultibaasProvider;

Then I am importing it in my component like this:

<script>
import LeftSideTabs from '../components/LeftSideTabs'
const services = new this.$service(this.apiKey);

alert(services)
export default {
    components: {
        LeftSideTabs
    },
    data() {
      return {
        apiKey: this.$store.state.apiKey
      }
    }

}
</script>

and I get Cannot read property '$service' of undefined

What am I doing wrong, how can I import it and use it in every component.

Upvotes: 0

Views: 383

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should use that $service inside the component context which is available inside the exported script options export default {...}, this works if you call it inside a lifecycle hook or a method any other property :

<script>
import LeftSideTabs from '../components/LeftSideTabs'

export default {
    components: {
        LeftSideTabs
    },
    data() {
      return {
        apiKey: this.$store.state.apiKey
      }
    },
   mounted(){
     const services = new this.$service(this.apiKey);

     alert(services)
  }

}
</script>

Upvotes: 1

Related Questions