无法访问VUE从js

Question

我试图用Vue创建一个应用程序，并且Vue-ressource 实际上，我需要使用ressource通过API调用创建auth系统。 但在我的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') 
     } 
     }) 
    } 
    } 
} 

和我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. 用axios替换vue-resource。容易做到。 Vue团队不再维护Vue资源，因此它是不好的选择。（https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.dwmy5ymjx）

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

   关于使用axios与vue的好laracasts。你会很快得到它。 https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18

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

3. 为了让您的身份验证模块中的Ajax请求，只需要导入爱可信和使用axios.post/axios.get

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