如何在vuejs中使用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: '[e-mail]'
}
},
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-带有可选的此上下文

如果这不起作用，您还可以使用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库，可能会处理上下文，使其更友好。

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

---

为什么that工作

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