使用 vue-resource 进行 Vueify答案

【问题标题】：Vueify with vue-resource使用 vue-resource 进行 Vueify
【发布时间】：2016-10-24 09:38:16
【问题描述】：

我似乎无法让 vue-resource 与 vueify 一起使用。我已经定义了一个 vue 组件，我将其包含在我的 main.js 文件中。

import Vue from 'vue'
import MyComponent from './my-component.vue'

new Vue({
    el: '#app',
    components: {
        myComponent: MyComponent
    }
});

我的 vue 组件文件是这样的：

<script>
    import Vue from 'vue';
    // import VueResource from 'vue-resource'
    // Vue.use(VueResource);

    export default {
        template: '#my-component-template',

        created: () => {
            Vue.$http.get('/my/api/123',
                data => {
                    console.log(data)
                }, err => {
                    console.log("Error");
                    console.error(err);
                }
            );
        }
    }
</script>

在当前状态下，我收到此错误：

Uncaught TypeError: Cannot read property 'get' of undefined

如果我在组件文件中注释掉关于 vue-resource 的两行，我收到的错误会变成这样：

Uncaught TypeError: Cannot redefine property: $url

package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.6",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-vueify": "^1.0.3",
    "vue": "^1.0.25",
    "vue-resource": "^0.8.0"
  }
}

Gulp 文件：

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
});

关于 SO 的所有现有答案都没有带来任何结果。请帮忙。

【问题讨论】：

如果取消注释 Vue.use(VueResource); 是否还会出现错误？ ?
感谢您的回复。是的，我收到：Uncaught TypeError: Cannot read property 'get' of undefined
重新定义错误通常会发生，因为您在应用程序中的某处包含了两次 vue-resource。您是否有机会使用 elixir 和 npm 导入您的 vue-resource 文件？如果你真的很挣扎，也许可以把它放在 github 上，这样我们可以看看。
会尽快处理的。
原来我的布局文件中还有一个剩余的 script 标签，其中包含 vue-resource。现在结合 Pantelis Peslis 的回答，我得到了它的工作。

标签： laravel browserify vue.js laravel-elixir vue-resource

【解决方案1】：

一旦您使用Vue.use(VueResource) 在main.js 中添加插件，它会将$http 属性添加到所有Vue 实例。您无需在组件文件中重新执行此操作。那你就用this.$http:

    created: () => {
        this.$http.get('/my/api/123',
            //...
        );
    }

【讨论】：

感谢您的回答。不幸的是，这也会返回错误Uncaught TypeError: Cannot redefine property: $url

【解决方案2】：

您是否尝试在您的根 vue 实例中添加 var VueResource = require('vue-resource');？同时添加Vue.use(VueResource)。

【讨论】：

【解决方案3】：

您应该将$http 替换为http：

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export default {
  created: () => {
    Vue.http.get(...)
  }
}

另外，最好将VueResource 安装到main 文件中，然后我们可以使用@Jeff 所说的this 关键字。

为此，您应该更改arrow function，因为this 指的是全局对象：

// refers to the global object
created: () => {}

// refers to the Vue component
created () {
  this.$http.get(...)
}

【讨论】：

关于全局对象和this绑定的好提示，谢谢
将 $http 更改为 http 并没有解决问题。但是改变箭头函数就可以了。我的布局文件中还有一个剩余的脚本标签，其中包含 vue-resource。
要使用Vue.http，您应该按照问题所述导入 Vue 并正确设置 VueResource。