vue.js的回调方法中不能修改组件变量答案

【问题标题】：Component variable can't be modified in a callback method in vue.jsvue.js的回调方法中不能修改组件变量
【发布时间】：2018-07-18 20:47:36
【问题描述】：

我在 vue.js 中定义了一个 Login.vue 组件，让我可以通过 AWS Cognito 将用户登录到我的应用程序。我使用___.authenticateUser() 方法登录用户并启动与Cognito 的会话。以下是执行此操作的实际代码：

export default {
  name : 'Login',
  data: function() {
    return {
      errorMessageHidden: true,
      formHidden: false,
      errorMessage: '',
      email: '',
      password: ''
    }
  },
  methods: {
    showValuesToMe: function() {
      console.log(this.errorMessageHidden)
    },
    handleLogin: function() {
      const data = {
        Username: this.email,
        Pool: userPool
      }

      const cognitoUser =  new CognitoUser(data);

      const authenticationData = {
        Username : this.email,
        Password : this.password,
      };

      function showErrorMessage(err) {
        this.errorMessageHidden = false;
        this.errorMessage = err.message;
        console.log("The method got called... errorMessageHidden = " + this.errorMessageHidden);
      }

      const authenticationDetails = new AuthenticationDetails(authenticationData)

      cognitoUser.authenticateUser(authenticationDetails, {
        callback: showErrorMessage,
        onSuccess: function(result) {
          console.log('access token ' + result.getAccessToken().getJwtToken());
        },
        onFailure: function(err) {
          this.callback(err);
        }
      });
    },

    hideErorrMessage: function() {
      this.errorMessageHidden = true;
    }
  }
}

问题在于，在组件的 handleLogin() 函数内部，当调用 ___.authenticateUser() 时，Cognito SDK 调用 onSuccess() 或 onFailure()，具体取决于 AWS 的身份验证结果。

当我尝试修改errorMessageHidden 和errorMessage 时，它们不能在onFailure() 内部！这是因为onFailure() 方法是一个回调方法和一个闭包。

为了访问/修改这些值，我在闭包的父级范围内定义了function showErrorMessage(err) {...}。现在我可以访问data 中定义的值，但仍然无法修改它们。

谁能弄清楚我如何更改值以进行更改并在浏览器中显示错误。

【问题讨论】：

标签： javascript amazon-web-services vue.js callback closures

【解决方案1】：

您的问题是因为您在回调函数中使用function 而不是箭头函数。当您使用 function 创建一个函数时，会创建一个新范围，并且 this 不再是您的 Vue 组件。

你想这样做：

handleLogin: function() {
      const data = {
        Username: this.email,
        Pool: userPool
      }

      const cognitoUser =  new CognitoUser(data);

      const authenticationData = {
        Username : this.email,
        Password : this.password,
      };

      const showErrorMessage = err => {
        this.errorMessageHidden = false;
        this.errorMessage = err.message;
        console.log("The method got called... errorMessageHidden = " + this.errorMessageHidden);
      }

      const authenticationDetails = new AuthenticationDetails(authenticationData)

      cognitoUser.authenticateUser(authenticationDetails, {
        callback: showErrorMessage,
        onSuccess: result => {
          console.log('access token ' + result.getAccessToken().getJwtToken());
        },
        onFailure: err => {
          this.callback(err);
        }
      });
    }

使用箭头函数，您将维护调用它的函数的范围，因此如果您在 Vue 方法中并使用箭头函数，则箭头函数内部this 仍然是 Vue 组件。

请注意，您不能将箭头函数用作methods 对象的直接属性。那是因为 Vue 需要调用绑定到 this 的 Vue 组件的函数，这是箭头函数无法做到的。但除此之外，你可能想在任何地方开始使用箭头函数，它们是我最喜欢的 ES5 特性之一。

【讨论】：