파이어베이스 콜백 내에서 vuejs 'this'에 액세스할 수 없는 이유는 무엇입니까?

파이어베이스 콜백 내에서 vuejs 'this'에 액세스할 수 없는 이유는 무엇입니까?

이 질문에는 이미 답변이 있습니다.

콜백 내에서 올바른 'this'에 액세스하는 방법 (13개의 답변)

닫힘4년 전에요.

파이어베이스를 사용하여 vuejs 어플리케이션에 인증을 추가하려고 합니다.사용자를 로그아웃하면 사용자는 로그인 페이지로 돌아갑니다.HelloWorld.vue 파일의 스크립트에 다음 코드를 구현했습니다.

import firebase from 'firebase'

  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      logout () {
        firebase.auth().signOut().then(function () {
          this.$router.push('login')
        })
      }
    }
  }

그러나 vuejs 개발 도구에서 다음과 같은 오류가 발생합니다.

TypeError: this is undefined
[Learn More]
app.js%20line%201954%20%3E%20eval:40:9
logout/<
HelloWorld.vue:37
Pb/e.a</e.g<
auth.js:23
Yb
auth.js:26
Ub
auth.js:26
h.Qb
auth.js:25
Cb
auth.js:19

파이어베이스 콜백의 이 오브젝트를 참조하다

this.$contain.contain')

콜백으로 접속할 수 없는 이유와 문제를 회피하는 방법을 알아내기 위해 도움이 필요합니다.잘 부탁드립니다.

화살표 기능을 사용하여 다음과 같이 수정할 수 있습니다.this다른 함수의 경우 vue 인스턴스로 범위가 지정되지 않습니다.

methods: {
  logout () {
    firebase.auth().signOut().then(() => { // arrow syntax
      this.$router.push('login')
    })
  }
}

나는 개인적으로 이것이 또 다른 변수 선언을 저장하기 때문에 이것을 선호한다.

또 다른 방법으로는bind(this):

methods: {
  logout () {
    firebase.auth().signOut().then(function () { 
      this.$router.push('login')
    }.bind(this)) // bind added.
  }
}

함수 내에서 'this'는 vue 인스턴스가 아닌 함수 자체에 바인딩됩니다.회피책:

methods: {
  logout () {
    const that = this      \\ the ES5 var is also possible
    firebase.auth().signOut().then(function () {
      that.$router.push('login')
    })
  }
}

언급URL : https://stackoverflow.com/questions/48080130/why-cant-i-access-vuejs-this-within-firebase-then-callbacks