vue.js - 无法使用$ http或Vue.http

Question

跟进

一系列评论回答了这个问题。跟进是导入/需求语句很重要的原因。我认为有效地做同样的事情。

原始问题
我正在尝试使用vue-resource对API进行REST调用。我到现在为止都可以使用Vue应用程序，该应用程序也使用vue-material，并且效果很好。我只是很难获得对http“对象”的引用，通过它我可以进行get / post / put调用。

栈基本上是vue-cli来创建一个webpack / npm项目。 vue-resouce肯定在package.json中:

"vue": "^2.2.1",
"vue-resource": "^1.3.1"

main.js看起来像这样:

import Vue from 'vue';
Vue.use(require('vue-material'));
Vue.use(require('vue-resource'));

import App from './App.vue'

console.log(this.$http);

new Vue({
el: '#app',
//other stuff
});

console.log(this.$http);

我把那些console.log语句放进去，因为最初我收到了类似的错误

cannot read property 'post' of undefined vue resource

果然，两个日志语句都产生“未定义”。 Vue.http产生相同的结果。

我在这里做错了什么？有趣的是，vue-material运行正常...

更新

在Vue实例内部检查仍然会产生未定义的内容:

mounted: () => {
    console.log(this.$http);
}

更新2-一种适用于的解决方案

感谢的评论，他们的结合解决了它。首先将require更改为import:

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

并使用为mounted创建函数的旧方法:

mounted: function () {
    console.log(this.$http);
}

Answer 1

您需要从Vue实例方法中检查this.$http:

import Vue from 'vue';
Vue.use(require('vue-resource'));

new Vue({
  el: '#app',
  mounted: function() {
    console.log(this.$http);
  }
})