javascript - vue.js 中的回调方法无法修改组件变量

Question

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

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 中定义的值，但仍然无法修改它们。

任何人都可以弄清楚如何更改值以进行更改并在浏览器中显示错误。

Answer 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 需要调用绑定(bind)到 this 的 Vue 组件的函数，这是箭头函数无法完成的。但除此之外，您可能想开始在任何可以使用的地方使用箭头函数，它们是我最喜欢的 ES5 功能之一。