Vue / Nuxt-マウント済み：（）=>マウント済み：function（）

Question

mountedで_() =>_とfunction()を使用した場合に結果が異なる理由：

_export default {
  mounted: () => {
    this.socket = 'something'
    console.log('mounted')
  },
  methods: {
    submitMessage() {
      console.log(this.socket) // undefined
    }
  }
}
_

function()の使用：

_export default {
  mounted: function() {
    this.socket = 'something'
    console.log('mounted')
  },
  methods: {
    submitMessage() {
      console.log(this.socket) // something
    }
  }
}
_

何か案は？

Answer 1

ライフサイクルフック、メソッドなどを定義するために矢印関数を使用しないでください（例：mounted: () => this.socket++）。その理由は、矢印関数が親コンテキストをバインドするため、これはVueインスタンスではなく、this.socketは未定義になります。