vue2.0 之 axios

2018-06-24 00:08:29来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

一、下载axios

cnpm install axios --save-dev(npm install axios --save-dev)这里的-dev:是上线过后还是需要使用的  --save-dev:是编辑时候需要使用的 

二、引入axios

import axios from 'axios'

三、使用axios

使用axios的两种方式:

1.把axios写在Vue的原型链中

Vue.prototype.$http = axios;

2.把axios封装起来,用vuex来使用(vuex:就是全局变量,使其他子组件可以使用)

首先看整体的结构:

 

第一步:在需要请求数据的组件里面通过store分发第一个dispatch:

 第二步:在main.js里面引入vuex的文件夹store,并导出store

 

第三步:把axios封装在api.js里面:

api.js里面的代码:

import axios from 'axios'; //导入axios

axios.defaults.baseURL = '';  //后端借口公共前缀
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

export function fetch(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, params)
            .then(response => {
                 alert('Api--ok');
                resolve(response.data);
            })
            .catch((error) => {
              console.log(error)
               reject(error)
            })
    })
}

export default {
  // 获取我的页面的后台数据
  mineBaseMsgApi(url) {
     alert('进入api.js')
    return fetch(url);
  }
}

 

第四步:创建Vue文件夹,里面包含index.js、type.js、actions.js、getter.js,以及文件夹modules:下面包含不同模块的mutations.js

第五步:store文件夹里面首先进入的是index.js

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex

Vue.use(Vuex);//实例化vuex

import mutations from './modules/mutations.js';
import actions from './actions.js';

export default new Vuex.Store({  //导出vuex里面的组件
    modules:{
        mutations
    },
    actions
});

其次在types.js里面导出一个自定义的常量,该常量是从调用数据的组件哪里传过来的:

在然后actions.js里面引入type.js的常量,actions主要是用来把type.js的常量通过commit提交给mutations,也可以使用异步操作:

modules/mutations.js里面获取到actions.js里面提交上来的数据,改变状态,并引入getters.js,getters.js就是可以把改变的数据缓存起来,在组件里面可以用mapGetters 辅助函数获取getters.js缓存的值:

 

getters.js

直到这里整个过程就完成了。项目地址:https://github.com/hhhzzy/vuexAxios

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:推荐一篇JavaScript讲模块化的文章

下一篇:回调函数