如何在 vue js 中使用 pusher 将数据重写为变量？

Question

想问一下在vue js上使用pusher时如何重写vue js变量数据。

在这种情况下，我拥有的推送器将每 5 分钟更改一次数据，但在这里我不会重写之前的变量。

通常我只使用：

<template>
    <div class="animated fadeIn">
        <b-card>
            <b-card-header>
                Record User
            </b-card-header>
            <b-card-body>
                <div>
                    <h3>Name  : {{ name }}</h3>
                    <h4>Email : {{ email }}</h4>
                </div>
            </b-card-body>
        </b-card>
    </div>
</template>

<script>
import Pusher from 'pusher-js' 

export default {
    name: 'Index',
    data() {
        return {
            name: 'John Doe',
            email: 'jdoe@gmail.com'
        }
    },
    created () {
      this.subscribe()
    },
    methods: {
      subscribe () {
        let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
        pusher.subscribe('users')
        pusher.bind('list', data => {
          console.log(data);
          this.name = data.name
          this.email = data.email
        })
      },
    },
}
</script>

但它没有改变，请帮助。

谢谢

Answer 1

问题是 pusher 在bind期间将 append 它自己的上下文。 有一种方法可以解决它

bind function 允许您将上下文作为第三个参数传递。 您可以像this在处理程序之后传递它：

subscribe () {
  let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
  pusher.subscribe('users')
  pusher.bind('list', data => {
    console.log(data);
    this.name = data.name
    this.email = data.email
  }, this) // <=== pass this as context
},

参考： https://pusher.com/docs/channels/using_channels/events#binding-with-optional-this-context

如果这不起作用，您还可以使用that var，它应该可以避免上下文问题。

subscribe () {
  let that = this;
  let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
  pusher.subscribe('users')
  pusher.bind('list', data => {
    console.log(data);
    that.name = data.name
    that.email = data.email
  })
},

---

您可能想尝试vue-pusher库，它可能会处理更适合 vue 的上下文。

https://www.npmjs.com/package/vue-pusher

---

为什么that行得通？

这没什么特别that ，但在 javascript 中， this是一个引用上下文的特殊变量。 在某些情况下，在处理回调函数时，上下文会发生变化。 this分配给一个新变量that该变量将 vue 方法的上下文存储在一个变量中，然后您可以引用它，即使在这种情况下，Pusher bind function 绑定了不同的上下文。