Javascript Can'；无法从js访问Vue

我正在尝试使用Vue和Vue ressource创建一个应用程序 实际上，我需要使用ressource通过API调用对系统进行身份验证。 但在我的Auth.js（我导入到我的login.vue）控制台中，他说他无法读取未定义的$http。很明显，我无法达到“这个”（所以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')
        }
      })
    }
  }
}

以及制作vue ressource帖子的my auth.js：

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)
}

用axios替换vue资源。容易做。Vue资源不再由Vue团队维护，因此使用它是一个错误的选择。（）

Axios受到广泛支持

关于将axios与vue结合使用的不错的建议。你会很快得到它的

无法访问auth模块中的Vue实例是正常的。尝试了解更多有关使用此的信息，您会很快发现“为什么？”

要在auth模块中发出ajax请求，只需导入axios并使用

axios.post

/

axios.get

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

用axios替换vue资源。容易做。Vue资源不再由Vue团队维护，因此使用它是一个错误的选择。（）

Axios受到广泛支持

关于将axios与vue结合使用的不错的建议。你会很快得到它的

无法访问auth模块中的Vue实例是正常的。尝试了解更多有关使用此的信息，您会很快发现“为什么？”

要在auth模块中发出ajax请求，只需导入axios并使用

axios.post

/

axios.get

---

有问题吗？请发表评论，我将进一步解释。

1.感谢所有提示！2.我已经更改了axios，所以我不知道vue资源不再受支持。3.因此，如果我理解得很好，这不能将vue放入我的auth JS中，因为它的上下文不同？正确的？（如果你有解释的链接：）有问题吗？若它对你们有效，记得投票并接受答案。它可以让其他用户找到正确的答案等。是的，我按回车键快速：p只需查看我的第一条评论：）3。对确切地这都是关于背景的。作为初学者，在ES6中学习上下文是值得的。从模块（您已经在做）开始，然后学习箭头函数和类似的

let

。它会帮你很多。谢谢你的提示！2.我已经更改了axios，所以我不知道vue资源不再受支持。3.因此，如果我理解得很好，这不能将vue放入我的auth JS中，因为它的上下文不同？正确的？（如果你有解释的链接：）有问题吗？若它对你们有效，记得投票并接受答案。它可以让其他用户找到正确的答案等。是的，我按回车键快速：p只需查看我的第一条评论：）3。对确切地这都是关于背景的。作为初学者，在ES6中学习上下文是值得的。从模块（您已经在做）开始，然后学习箭头函数和类似的

let

。这对你会有很大帮助