Detalhamento do problema de direção de this ao usar axios no vue

Prévia

Como é sabido, axios é um plugin de solicitação de dados conhecido no vue-resource após a aparência do plug-in de solicitação de dados Vue. O vue foi atualizado para2.0, o autor Youda declarou que não mais fornecerá suporte para vue-resource não é atualizado, mas recomendado axios. Mais detalhes podem ser encontrados aqui: https://pt.oldtoolbag.com/article/109444.htm

Este artigo apresenta principalmente sobre o problema de apontamento de this ao usar axios no vue. Não há muito a dizer, vamos juntos ver a introdução detalhada.

1.Solução

Quando se usa axios para fazer solicitações de rede no vue, pode encontrar que this não aponta para vue, mas para undefined. Você pode resolver isso usando a função de seta "=>". Veja a seguir:

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 });
  .then(function(response){
  console.log(this); //aqui this = undefined
  });
  .catch((error)=> {
  console.log(error); //a função flecha "=>" faz this apontar para vue
  });
 });
 }
} 

2. Motivo

ES6o this dentro da função flecha "=>" é de escopo léxico, determinado pelo contexto (ou seja, pelo chamador externo vue).

3. Outras palavras

com "=>" função, você pode dizer adeus às duas formas anteriores:

usar "=>" para mudar o this de função anônima

hack escrita var _this= this; ：

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //Aqui _this aponta para vue
 });
 });
 }

Resumo

Isso é tudo o que há no artigo. Espero que o conteúdo deste artigo tenha algum valor de referência para o seu aprendizado ou trabalho. Se tiver alguma dúvida, você pode deixar um comentário para trocar ideias. Agradecemos o apoio ao Tutorial Grito.

Declaração: O conteúdo deste artigo é extraído da internet, pertence ao autor original, foi contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Apenas após a verificação, o site deletará o conteúdo suspeito de violação de direitos autorais.)