Vue2.0学习——axios用法详解2引入本地json数据(axios和vue-axios)

前面对爱可信有了一个全面的介绍，下面结合实例说一下axios和vue-axios，以及如何用axios请求本地json数据。

首先看一下将axios注册成全局函数的用法：main.js 

import axios from 'axios' Vue.prototype.axios = axios

添加一个全局函数，然后在相应的.vue文件中使用

defaultData(){ this.axios.get('本地的json文件地址', { }).then(function (response) { // 将接收到的数据传递到data的数据中 }).catch(function (response) { console.log(response); }); }

这样组件就可以引用本地的数据了，需要说明的时.json 文件最好放在static文件夹中，这个文件夹中的文件在打包的时候是不会进行压缩和处理的。

那么vue-axios的作用是什么？

相信很多人都有这样的疑问了，一起来看一下vue-axios的源码：

index.js

(function () { /** * Install plugin * @param Vue * @param axios */ function plugin(Vue, axios) { if (plugin.installed) { return } plugin.installed = true if (!axios) { console.error('You have to install axios') return } Vue.axios = axios Object.defineProperties(Vue.prototype, { axios: { get() { return axios } }, $http: { get() { return axios } } }) } if (typeof exports == "object") { module.exports = plugin } else if (typeof define == "function" && define.amd) { define([], function(){ return plugin }) } else if (window.Vue && window.axios) { Vue.use(plugin, window.axios) } })();

简单的说，vue-axios是为了更加符合规范的，直接将axios绑定到原型链上不是不可以，但和他人写作的时候就必须注明你注册的变量名称，反而不如直接使用vue-axios。

vue-axios用法

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)使用上和第一种是没有区别的，为了便于合作，建议大家使用vue-axios。