Vue undefined 属性使用时的Id Laravel Echo

Question

我正在学习 Vue2，目前，我有一个使用 Laravel、Vue2、Laravel Echo、Sanctum 和 Websockets 包的简单样板，全部使用 Laravel 默认值回声设置。一切都很好。

现在我正在尝试解耦，所以我创建了相同的样板，但作为 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。

Answer 1

尝试使用函数来延迟，而不是赋值。赋值时没有定义。

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])
     })

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

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

Vue undefined property Id when using Laravel Echo