PusherJS和Vue 3？

Question

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

我目前关注pusher通知的方式。

...
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/