vue插件vue-resource的使用笔记（小结）

最近手头有个小项目，打算用vue练个手，期间用到了vue的插件：vue-resource。下面是我使用这个插件的一些经验，算是给自己写的一个笔记，分享出来也希望和我遇到同样坑的朋友可以借此踩坑而过~

在使用这个插件之前，当然是先安装啦：

npm i vue-resource --save

安装读条完毕，接下来便是在项目中引入：

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

如上所述，在入口文件中引入vue-resource即可。然后便是具体的使用了。vue-resource的使用和以前在JQ,ZEPTO等等中使用的$.ajax方式类似，当然，官方也提供了一系列的接口供小伙伴儿们使用，具体在此不做赘述，有兴趣的小伙伴儿请移步：

Git传送门：https://github.com/pagekit/vue-resource/blob/master/README.md

具体的使用方式个中均有详述。

最后，就是我自己遇到的一个坑，上代码！（不喜过程的小伙伴儿可以看波代码，然后直接跳到文章尾看结论。）

<script> export default {  name: 'app',  data () {   return {    articles: []   }  },  created: function() {   this.$http.get('/api/user/order/list',     {       productType:"1",       pageNum:1,       pageLimit:8     },     {      headers:{      },      emulateJSON: true     }   ).then((response) => {    this.articles = response.data.data.list;   }).catch(function(response) {    console.log(response)   });  } }</script>

这个是最初始的代码，满心欢喜打包运行之后，发现控制台报了个错，说list未定义！WTF！为此我去后台看了下接口调用的情况，发现之前在调用接口时所传的参数并没有传参成功，后来去网上多方搜查资料，发现把传参方式修改成如下形式即可：

{ params: {  productType:"1",  pageNum:1,  pageLimit:8 }}

和之前的传参方式不同，这次我把参数加在了一个名为params的对象中，再次打包后上传，发现接口调用成功！

在这里，我对params做一个解释，params表示的是支持上传多个可变参数，至于为啥加了之后就可以了，我也不是非常清楚，如有大神看到，望不吝赐教OTZ。

OK，既然接口调用成功了，那么数据也应该就如愿以偿的可以获取到了，然而看到页面上仍是一片空白，懵逼的我瞄了一眼控制台，发现此时控制台上报了个错，说list未定义。WTF！为此我仔细的看了下接口的数据结构，发现这样赋值并没有问题，可就是报错未定义。于是便有了如下猜想：

想法一：response数据返回有误

针对这个想法，我console了下response，发现response返回正常，此想法被终结。

想法二：既然response返回没有问题，那问题难道出在data上？