无法访问 vue-resource 中的“get”方法

Question

我有一个很小的 ​​vue 应用程序，我想在其中使用 vue-resource 来请求 api 端点。

1. 我已经通过 npm 安装了vue-resource
2. 我已将 Vue.use(VueResource) 行添加到我的引导文件中
3. 我已经像这样设置我的组件来调用.get 方法

博客.vue

...
mounted () {
  this.fetchPosts()
},
methods: {
  fetchPosts: () => {
    debugger;
    this.$http.get('my-url')
      .then(response => {
        console.log(response)
      })
  }
}
...

我已经看到一些 github 问题和 SO 帖子涉及此类问题，但大多数似乎与我不认为的不正确配置有关（很高兴被证明是错误的） ！）

我得到的具体控制台错误是：

Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"

奇怪的是，如果你看到我的debugger 行，如果我在那个时候看到console.log this.$http.get：

function (url, options$$1) {
        return this(assign(options$$1 || {}, {url: url, method: method$$1}));
    }

如果我让代码运行然后尝试console.log，我会得到：

Cannot read property 'get' of undefined

因此，我认为这是某种 this 上下文问题，但据我所知，参考应该是正确的......不是吗？

Answer 1

方法不应该是箭头函数。如果使用箭头函数声明方法，this 将不会指向 vue 实例。

改用普通函数：

methods: {
  fetchPosts(){
    debugger;
    this.$http.get('my-url')
      .then(response => {
        console.log(response)
      })
  } 

可以看到警告here