javascript - js无法访问Vue

Question

我正在尝试使用 Vue 和 Vue-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)
})

登录.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 帖子:

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

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

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

   关于在 vue 中使用 axios 的精彩 laracast。你很快就会得到它。 https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18

2. 在 auth 模块中无法访问 Vue 实例是正常的。尝试了解有关使用this的更多信息，您很快就会明白“为什么？”

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

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