插件在VueJS中没有激活

Question

我试图在我的应用程序中使用vue-authenticate，但是我在使用插件的方法时遇到了一些问题。这个插件具有依赖性vue-resource，所以第一步是安装这两个包。

在main.js文件中，我导入并激活两个包(包括用于本地身份验证的特定配置)：

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueAuthenticate from 'vue-authenticate'
// ...
Vue.use(VueResource)
Vue.use(VueAuthenticate, {
  baseUrl: 'http://sgc-server.dev',
  tokenType: 'Token'
})

现在，在名为Login的登录组件中，创建一个名为aLogin的方法，以避免名称冲突：

// ...
methods: {
  aLogin: (_credenciales) => {
    this.$auth.login(_credenciales).then((_carga) => {
      // Ejecutamos la lógica que sigue a un login exitoso
      console.log(_carga)
    })
  }
} 
// ..

在这个组件中，credenciales是一个对象，在data()中定义有两个属性username和password。aLogin方法在submit事件上以表单形式调用。

<form class="form" @submit.prevent="aLogin(credenciales)">

但是什么都没发生，把这个放在控制台上。

Login.vue?8031:64 Uncaught TypeError: Cannot read property 'login' of undefined
    at VueComponent.aLogin (eval at <anonymous> (app.js:1987), <anonymous>:18:18)
    at Proxy.boundFn (eval at <anonymous> (app.js:735), <anonymous>:125:14)
    at submit (eval at <anonymous> (app.js:7875), <anonymous>:21:13)
    at HTMLFormElement.invoker (eval at <anonymous> (app.js:735), <anonymous>:1657:18)

如果this.$auth已经在main.js中注册了，为什么它是undefined？如何才能正确地激活它？

提前谢谢。

Answer 1

不要在Vue中使用fat箭头函数定义方法。如果这样做，this将不引用Vue实例。

试一试

methods: {
  aLogin: function(_credenciales){
    this.$auth.login(_credenciales).then((_carga) => {
      // Ejecutamos la lógica que sigue a un login exitoso
      console.log(_carga)
    })
  }
}

请参阅VueJS: why is “this” undefined?