为何在Firebase的then回调中无法访问Vue.js的this？求解决方案

你遇到的这个错误我之前也碰到过，核心原因是回调函数里的this指向不对，下面给你详细拆解原因和可行的解决办法：

问题根源 #

在JavaScript的普通function()回调里，函数会创建自己的执行上下文，此时this指向的是这个回调函数本身，而不是外层的Vue组件实例。所以你在回调里调用this.$router时，这个this根本不是你的Vue组件，自然会报undefined的错误。

解决办法 #

方法1：使用箭头函数（最推荐） #

箭头函数不会创建自己的this，它会直接继承外层作用域的this（也就是你的Vue组件实例）。修改后的代码如下：

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

方法2：提前保存Vue实例的引用 #

在回调函数外面，把Vue组件的this存到一个变量（比如vm）里，然后在回调中用这个变量访问$router：

import firebase from 'firebase'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    logout () {
      const vm = this // 保存Vue实例的引用
      firebase.auth().signOut().then(function () {
        vm.$router.push('login')
      })
    }
  }
}

方法3：用bind()绑定this上下文 #

通过bind(this)把回调函数的this强制绑定到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')
      }.bind(this)) // 绑定this到Vue实例
    }
  }
}

这三种方法都能解决你的问题，其中箭头函数的写法最简洁直观，也是Vue项目里最常用的方式。

内容的提问来源于stack exchange，提问作者Ramandeep Singh