如何使用axios+vuex來調接口

這篇文章主要講解了“如何使用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文件里：

<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來調接口這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！