vue2.0 之 axios

一、下载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
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有