一、下载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