2

想问一下在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>

但它没有改变，请帮助。

谢谢

4

1 回答 1

2

问题是 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

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

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，但在 javascriptthis中是一个引用上下文的特殊变量。在某些情况下，在处理回调函数时，上下文会发生变化。分配this给一个新变量that，将 vue 方法的上下文存储在一个变量中，然后您可以引用它，即使在这种情况下，Pusher 绑定函数绑定了不同的上下文。

于 2020-04-30T02:36:29.257 回答