Question

Vue TypeError：这是未定义的

2020-01-20

2887

vue.js vuejs2 vue-component

为什么这里的 this 未定义？注销时单击此错误，浏览器控制台中显示 TypeError: this is undefined

<script lang="ts">
import Vue from "vue";
import { getModule } from "vuex-module-decorators";
import Component from "vue-class-component";
import AuthModule from "@/store/auth";
import Store from "@/store";

const authModule = getModule(AuthModule, Store);

@Component({})
export default class App extends Vue {
  mounted() {
    console.log("App mounted");
  }
  onLogoutClick() {
    authModule.logout().then(function() {
      this.$router.push("/login");
    });
  }
 }
</script>

Answer 1

尝试一下。

methods: {
       onLogoutClick() {
        let self = this
        authModule.logout().then(function() {
          self.$router.push("/login");
        });
      }

Answer 2

使用箭头函数来指向匿名函数可以解决这个问题。箭头函数将 this 绑定到词法作用域的 this （在本例中为 onLogoutClick 的 this）。

onLogoutClick() {
    authModule.logout().then(() => {
      this.$router.push("/login");
    });
}