使用axios+vuex来调接口使数据随处可用

概述首先安装：axios和vuex 这里推荐使用：vue ui来以插件的形式安装axios，注意vue ui是脚手架3.0才开始有这个，vuex的安装我就不在介绍了请自行安装。 安装好整个项目后包括axios和vuex，这个时候我们再对项目的目录简单的改改下： 第一步：在src目录下新建文件夹stores目录，再建目录modules（存放自己创建的文件）和同级文件getters.js。 第二步：把ma 首先安装：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文件里：

<template>  <div>{{userinfo.username}}</div></template>

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来调接口使数据随处可用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。