laravel - 使用 Laravel Echo 时 Vue 未定义的属性 Id

Question

我正在学习 Vue2，目前，我有一个使用 Laravel、Vue2、Laravel Echo、Sanctum 和 Websockets 包的简单样板，所有这些都使用 Laravel 默认的 Echo 设置。那里一切正常。

现在我正在尝试解耦事物，所以我创建了相同的样板，但作为 Vue SPA 并使用 Laravel Passport（我有我的理由将事物解耦并使用 Passport）。那里一切正常，包括我添加的时间线，但不是实时的东西。

我需要在几个地方通过 Echo 事件传递用户 ID，所以我在 main.js 中创建了一个全局用户对象，如下所示（我正在使用命名空间模块）：

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

但是每次我尝试将用户 id 传递给事件时，id 都是未定义的，因此 Pusher 无法验证通道。虽然如果我从任何组件中控制台记录用户，我可以看到带有 id 的用户对象。我还可以在 Websockets 仪表板中看到该事件。所以一切正常，除了传递 id。如果我这样做：

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

结果是这样的：

private-timeline.undefined

我还尝试了其他语法，例如：

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

我很难确定我缺少什么才能通过 id。

score 1 · Accepted Answer

尝试使用函数来延迟，而不是赋值。它在分配期间没有定义。

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

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

或直接访问商店。

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

或者更好的是，在您的商店中使用吸气剂。（我会留给你添加吸气剂......）

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

1 回答 1