189 8069 5689
这篇文章主要讲解了“如何使用axios+vuex来调接口”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用axios+vuex来调接口”吧！
首先安装：axios和vuex
这里推荐使用：vue ui来以插件的形式安装axios，注意vue ui是脚手架3.0才开始有这个，vuex的安装我就不在介绍了请自行安装。
安装好整个项目后包括axios和vuex，这个时候我们再对项目的目录简单的改改下：
第一步：在src目录下新建文件夹stores目录，再建目录modules（存放自己创建的文件）和同级文件getters.js。
第二步：把main.js同层级下的store.js移到stores目录里，把名称改成index.js
import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app.js"; //modules目录下随意创建你要的文件，这里我创建了app.js文件
import getters from "./getters";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: { app },
getters
});
export default store;第三步：把main.js里的store.js的引入地址改成如下即可：
import store from "./stores";
第四步：把modules目录里的app.js修改如下，这里我已经使用Promise创建了登录和退出的两个例子，当接口返回成功有带回的数据我可以在这里做处理到state里，这个时候，我就可以在整个项目的随便一个组件里，使用compoted来获取到值，当然这里你要可以使用cookie或者sessionStorage，localStorage来做这个缓存你的用户信息，这里我是放在utils目录的auth.js文件里：
{{userinfo.username}}
computed: { //任何一个组件里怎么调用
userinfo() {
return this.$store.state.app.userinfo;
}
},import { login, logout } from "@/api/app";
const app = {
state: {
userinfo: {},
},
mutations: {
LOGIN_USER_INFO: (state, obj) => {
state.userinfo = obj;
}
},
actions: {
// 登录
doLogin({ commit }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo.username, userInfo.password)
.then(response => {
commit("LOGIN_USER_INFO", response.data);
resolve(true);
})
.catch(error => {
reject(error);
});
});
},
//退出
doLogout({ commit }) {
return new Promise((resolve, reject) => {
logout()
.then(response => {
resolve(response);
})
.catch(error => {
reject(error);
});
});
}
}
};
export default app;第五步：在src下创建api目录，里面创建api.js文件内容如下，这里引入request.js是axios的东东，我这里是放在src目录下的utils目录里，主要用来调接口，报错提示，设置headers里的Authorization值等，可以自行看axios的文档即可：
import request from "_u/request";
export function login(username, password) {
return request({
url: "/auth/login",
method: "post",
data: {
username,
password
}
});
}
export function logout() {
return request({
url: "/auth/logout",
method: "post"
});
}第六步：当你创建好后，你就可以这样的在任何一个组件里怎么调用api：
this.$store.diapatch('doLogin',{username:'',password:''}).then(json=>{
if(json.code == 0){ //做你任何的逻辑处理
console.log('成功登录')
}
})贴出我utils目录里的auth.js文件内容，你可以在任何一个组件里怎么调用：
import { getStorage, setStorage, removeStorage } from "@/utils/auth";export function getStorage(key) {
return sessionStorage.getItem(key);
}
export function setStorage(key, val) {
return sessionStorage.setItem(key, val);
}
export function removeStorage(key) {
return sessionStorage.removeItem(key);
}
export function getLocal(key) {
return localStorage.getItem(key);
}
export function setLocal(key, val) {
return localStorage.setItem(key, val);
}
export function removeLocal(key) {
return localStorage.removeItem(key);
}感谢各位的阅读，以上就是“如何使用axios+vuex来调接口”的内容了，经过本文的学习后，相信大家对如何使用axios+vuex来调接口这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。