Vue undefined property Id when using Laravel Echo

Question

I'm learning Vue2 and currently, I have a simple boilerplate using Laravel, Vue2, Laravel Echo, Sanctum, and the Websockets package, all using the Laravel default Echo setup. Everything works nicely there.

Now I'm trying to decouple things, so I've created the same boilerplate but as a Vue SPA and using Laravel Passport (I have my reasons for decoupling things and for using Passport). Everything works fine there as well, including a timeline I've added, but not the real-time stuff.

I need to pass the user id with the Echo event in a few places, so I created a global user object in main.js, like this (I'm using namespaced modules):

let User = store.state.auth.user
Vue.prototype.$user = User

But every time I try passing the user id to an event, the id is undefined, so Pusher cannot authenticate the channel. Though if I console log the user from within any component, I can see the user object with the id. I can also see the event in the Websockets dashboard. So everything works as normal, except passing the id. If I do this:

  Echo.private(`timeline.${this.$user.id}`)
      .listen('.PostWasCreated', (e) => {
       this.PUSH_POSTS([e])
     })

The results is this:

private-timeline.undefined

I've also tried other syntax, such as:

   Echo.private('timeline.'+this.$user.id)
        .listen('.PostWasCreated', (e) => {
         this.PUSH_POSTS([e])
     })

I'm having a difficult time trying to determine what I'm missing to be able to pass the id.

Answer 1

Try to use a function to defer, instead of an assignment. It is not defined during the assignment.

Vue.prototype.$getUser = ()=>store.state.auth.user

Echo.private(`timeline.${this.$getUser().id}`)
      .listen('.PostWasCreated', (e) => {
       this.PUSH_POSTS([e])
     })

or access the store directly.

Echo.private(`timeline.${this.$store.state.auth.user.id}`)
      .listen('.PostWasCreated', (e) => {
       this.PUSH_POSTS([e])
     })

Or even better, use a getter in your store. (I will leave it to you to add the getter...)

Echo.private(`timeline.${this.$store.getters.userId}`)
      .listen('.PostWasCreated', (e) => {
       this.PUSH_POSTS([e])
     })