如何使用axios+vuex來調(diào)接口-創(chuàng)新互聯(lián)

這篇文章主要講解了“如何使用axios+vuex來調(diào)接口”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用axios+vuex來調(diào)接口”吧！

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比沙坪壩網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式沙坪壩網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋沙坪壩地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

首先安裝：axios和vuex
這里推薦使用：vue ui來以插件的形式安裝axios，注意vue ui是腳手架3.0才開始有這個，vuex的安裝我就不在介紹了請自行安裝。
安裝好整個項目后包括axios和vuex，這個時候我們再對項目的目錄簡單的改改下：

第一步：在src目錄下新建文件夾stores目錄，再建目錄modules（存放自己創(chuàng)建的文件）和同級文件getters.js。
第二步：把main.js同層級下的store.js移到stores目錄里，把名稱改成index.js

import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app.js"; //modules目錄下隨意創(chuàng)建你要的文件，這里我創(chuàng)建了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修改如下，這里我已經(jīng)使用Promise創(chuàng)建了登錄和退出的兩個例子，當(dāng)接口返回成功有帶回的數(shù)據(jù)我可以在這里做處理到state里，這個時候，我就可以在整個項目的隨便一個組件里，使用compoted來獲取到值，當(dāng)然這里你要可以使用cookie或者sessionStorage，localStorage來做這個緩存你的用戶信息，這里我是放在utils目錄的auth.js文件里：

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

computed: { //任何一個組件里怎么調(diào)用
    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下創(chuàng)建api目錄，里面創(chuàng)建api.js文件內(nèi)容如下，這里引入request.js是axios的東東，我這里是放在src目錄下的utils目錄里，主要用來調(diào)接口，報錯提示，設(shè)置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"
  });
}

第六步：當(dāng)你創(chuàng)建好后，你就可以這樣的在任何一個組件里怎么調(diào)用api：

this.$store.diapatch('doLogin',{username:'',password:''}).then(json=>{
  if(json.code == 0){  //做你任何的邏輯處理
    console.log('成功登錄')  
  }
})

貼出我utils目錄里的auth.js文件內(nèi)容，你可以在任何一個組件里怎么調(diào)用：

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來調(diào)接口”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何使用axios+vuex來調(diào)接口這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文標(biāo)題：如何使用axios+vuex來調(diào)接口-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article18/coiogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、做網(wǎng)站、標(biāo)簽優(yōu)化、ChatGPT、App設(shè)計、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容