Pusher JS 和 Vue 3？

Question

我想观看推送事件并更新本地状态或重新渲染组件。

我目前关注推送通知的方式。

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

Pusher JS 和 Vue 3？

PusherJS and Vue 3?

pusher

vue.js

vue-component

pusher-js