使用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文件裏：

<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);
}