動機

ElectronのipcRenderer.on()内でthis.countに受け取った値を代入したかったのにうまく行かなかったので
解決はしたが原因がわかりません…

目次

うまくいかない例

  mounted() {
    ipcRenderer.on("setCount", (_, arg) => {
      this.count = arg;
    });
  },

うまくいく例

なかなかグロテスクなコードになりました…
thisをコールバックの外に出してみたら何故かうまく行った

  async mounted() {
    this.count = await ((): Promise<string> =>
      new Promise((resolve) => {
        ipcRenderer.on("setCount", (_, arg) => {
          resolve(arg);
        });
      }))();
  },

関数を分けるなら

  methods: {
    async waitIpcMessage(): Promise<string> {
      return new Promise((resolve) => {
        ipcRenderer.on("setCount", (_, arg) => {
          resolve(arg);
        });
      });
    }
  },
  async mounted() {
    this.count = await this.waitIpcMessage();
  }

最後に

なぜこれならうまくいくのか知っている方は教えてください...
thisが外に出てるからうまくいくっぽい？よくわかりません

話は逸れますが非同期周りの書き方ってかなり複雑ですよね