PusherJS and Vue 3?

Question

我想观察pusher事件并更新本地状态或reender组件。

我目前遵循推送通知的方式。

...
methods: {
refreshSlider() {
const pusher = new Pusher(process.env.VUE_APP_PUSHER_ID, {
cluster: "eu",
});
Pusher.logToConsole = true;
const channel = pusher.subscribe("my-channel");
channel.bind("my-event", async function () {
// alert("1");
console.log(this.sliders); //undefined!
});
},
},
...
async mounted() {
.....
this.refreshSlider();
},

请帮帮我，祝你今天愉快。

Answer 1

您正在丢失my-event处理程序中的this作用域。你应该使用胖箭头函数而不是普通函数：

...
methods: {
refreshSlider() {
const pusher = new Pusher(process.env.VUE_APP_PUSHER_ID, {
cluster: "eu",
});
Pusher.logToConsole = true;
const channel = pusher.subscribe("my-channel");
channel.bind("my-event", async () => {
// alert("1");
console.log(this.sliders); //should exist now
});
},
},
...
async mounted() {
.....
this.refreshSlider();
},

下面是一篇关于this作用域和胖箭头函数的精彩文章：https://www.freecodecamp.org/news/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881/