Не удается получить доступ к Vue от js

Question

Я пытаюсь создать приложение с Vue и Vue-ressource На самом деле мне нужно использовать ressource для создания системы auth по вызову API. Но в моем Auth.js (который я импортирую в свой login.vue) консоль сказал, что он не может прочитать $ http неопределенного. Так что apparantly я не могу достичь '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 где сделал вю-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-ресурс аксиомами. Легко сделать. Vue-ресурс больше не поддерживается командой Vue, поэтому его плохо использовать. (https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.dwmy5ymjx)

   Axios широко поддерживается. https://github.com/mzabriskie/axios.

   Nice laracasts об использовании аксиом с vue. Вы быстро это получите. https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18

2. Это нормально, что вы не можете получить доступ к экземпляру Vue в своем модуле auth. Постарайтесь узнать больше об использовании this, и вы быстро получите его «почему?».

3. Для выполнения запросов AJAX в вашем модуле AUTH, просто импортировать Вардар и использовать axios.post/axios.get

Есть вопросы? Комментарий, и я объясню больше.