无法从js访问Vue

Question

我正在尝试使用 Vue 和 Vue-ressource 创建一个应用程序实际上，我需要使用资源通过 API 调用来制作身份验证系统。但是在我的 Auth.js（我导入到我的 login.vue）控制台中说他无法读取未定义的 $http。所以显然我无法达到 'this'（所以 vue）。我错过了什么吗？或者它只是一个不好的用途？

谢谢大家

其实我的 main.js :

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(VueRouter)
Vue.use(VueResource)

import App from './components/App.vue'

import Login from './components/Login.vue'
import Home from './components/Containers.vue'


function requireAuth (to, from, next) {
  if (!auth.loggedIn()) {
    next({
      path: '/',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/home', name: 'home', component: Home, beforeEnter: requireAuth },
    { path: '/', component: Login },
    { path: '/logout',
      beforeEnter (to, from, next) {
        auth.logout()
        next('/')
      }}
  ]
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

login.vue

import auth from '../utils/auth'

export default {
  data () {
    return {
      email: '',
      pass: '',
      error: false
    }
  },
  methods: {
    login () {
      auth.login(this.email, this.pass, loggedIn => {
        if (!loggedIn) {
          this.error = true
        } else {
          console.log('good')
          this.$router.replace('/home')
        }
      })
    }
  }
}

和我的 auth.js 制作 vue-ressource post 的地方：

export default {
  login (email, pass, cb) {
    cb = arguments[arguments.length - 1]
    if (localStorage.token) {
      if (cb) cb(true)
      this.onChange(true)
      return
    }
    pretendRequest(email, pass, (res) => {
      if (res.authenticated) {
        localStorage.token = res.token
        if (cb) cb(true)
        this.onChange(true)
      } else {
        if (cb) cb(false)
        this.onChange(false)
      }
    })
  },

  getToken () {
    return localStorage.token
  },

  logout (cb) {
    delete localStorage.token
    if (cb) cb()
    this.onChange(false)
  },

  loggedIn () {
    return !!localStorage.token
  },

  onChange () {}

}

function pretendRequest (email, pass, cb) {
  setTimeout(() => {
    this.$http.post('localhost:9000/api/login', {email: email, password: pass}).then(response => {
      if (response.status === 200) {
        cb({
          authenticated: true,
          token: Math.random().toString(36).substring(7)
        })
      } else {
        cb({ authenticated: false })
      }
    }, response => {
      console.log('error ' + response.status)
    })
  }, 0)
}

Answer 1

用axios替换vue-resource。容易做。 Vue-resource 不再由 Vue 团队维护，因此使用它是错误的选择。( https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.dwmy5ymjx )

Axios 得到广泛支持。 https://github.com/mzabriskie/axios。

关于在 vue 中使用 axios 的不错的 laracasts。你会很快得到它。 https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18
在你的auth模块中无法访问Vue实例是正常的。尝试了解更多有关使用 this 的信息，您将很快掌握 'why?'
要在您的身份验证模块中发出 ajax 请求，只需导入 axios 并使用 axios.post / axios.get

有什么问题吗？评论，我会解释更多。

无法从js访问Vue

Can't access Vue from js

javascript

vue.js

vue-resource

vue-router

vuejs2