Javascript “无法访问”；这"；在VUEJS 2中的Axios POST方法中

我不明白为什么我不能在Axios的POST方法的回调响应中访问我的数据。

我试图在错误服务器响应上打印一条错误消息，但它在catch error函数中表示“this”未定义
这是我的代码：

<template>
<div class="row">
  <div class="form-group">
    <label for="exampleInputEmail1">Login</label>
    <input type="text" v-model="loginForm" class="form-control" id="exampleInputEmail1" placeholder="login">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" v-model="passwordForm" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button  @click="submitForm();" class="btn btn-default">Submit</button>
  <div class="row" v-if="errorBool" style="color:red;"></div>
</div>
</template>



<script>
  import store from '../../store/store.js'
  import Vuex from 'vuex'
  import axios from 'axios'
  export default {
    store: store,
    name: 'Login',
    data () {
      return {
        msg: 'Welcome to Login page',
        passwordForm: 'admin',
        loginForm: 'admin',
        errorBool: false,
        errorMessage : ''
      }
    },
    computed: {
    ...Vuex.mapGetters([
        'authentification'
    ]),
    },
    methods: {
      ...Vuex.mapActions([
      'loadToken',
      'isAuth',
      'isNotAuth'
      ]),
      submitForm : function() {

        axios.post('http://127.0.0.1:5000/login', {
            name: this.loginForm,
            password: this.passwordForm
          })
           .then((response) => {
            this.loadToken({token: response.data.token})
            this.isAuth()
            this.$router.push('/dashboard')
            this.errorBool = false
          })
          .catch(function (error) {
            console.log(this) // undefinided
            this.errorBool = true
            this.errorMessage = error
            this.isNotAuth()
          })
          }
    },
  }
</script>

登录
密码
提交
从“../../store/store.js”导入存储
从“Vuex”导入Vuex
从“axios”导入axios
导出默认值{
店:店,，
名称：'登录'，
数据（）{
返回{
msg:'欢迎登录页面'，
密码形式：“admin”，
loginForm:'管理员'，
波尔：错，
错误消息：“”
}
},
计算：{
…Vuex.mapGetters([
“认证”
]),
},
方法：{
…Vuex.mapActions([
“loadToken”，
“isAuth”，
“isNotAuth”
]),
submitForm:function（）{
轴心柱http://127.0.0.1:5000/login', {
名称：this.loginForm，
密码：this.passwordForm
})
。然后（（响应）=>{
this.loadToken（{token:response.data.token}）
this.isAuth（）
此.$router.push（“/dashboard”）
this.errorBool=false
})
.catch（函数（错误）{
console.log（this）//未定义
this.errorBool=true
this.errorMessage=错误
this.isNotAuth（）
})
}
},
}

就像您对

然后

回调所做的那样，您应该对

捕获

回调使用箭头函数，否则您将丢失所需的

此

绑定

指定与两个

然后
回调参数相关的参数：

oncompleted
和
onRejected
必须作为函数调用（即不使用
此值）。3.2

3.2也就是说，在严格模式下，
此
将
未定义
；在sloppy模式下，它将是全局对象

这同样适用于
catch
，这只是使用
then
的第二个参数的替代方法

所以写下：

.catch( error => {
    console.log(this) // <-- problem solved.
    this.errorBool = true
    this.errorMessage = error
    this.isNotAuth()
})

.catch（错误=>{
console.log（this）//就像您对
然后
回调所做的那样，您应该对
捕获
回调使用箭头函数，否则您将丢失所需的
此
绑定

指定与两个
然后
回调参数相关的参数：

oncompleted
和
onRejected
必须作为函数调用（即不使用
此值）。3.2

3.2也就是说，在严格模式下，
此
将是
未定义的
；在松散模式下，它将是全局对象

这同样适用于
catch
，这只是使用
then
的第二个参数的替代方法

所以写下：

.catch( error => {
    console.log(this) // <-- problem solved.
    this.errorBool = true
    this.errorMessage = error
    this.isNotAuth()
})

.catch（错误=>{
console.log（这个）//