vue.js - 如何在 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 期间附加它自己的上下文。 .有一种方法可以解决它
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 绑定(bind)函数绑定(bind)了不同的上下文。