ios可以用java接口么_使用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);

}