如何在 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

问题是推送器会在 bind 期间附加它自己的上下文。不过有办法绕过它

bind 函数允许您将上下文作为第三个参数传递。您可以像这样在处理程序之后传递 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 绑定函数绑定了不同的上下文。