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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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来调接口使数据随处可用的主要内容,如果未能解决你的问题,请参考以下文章

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

Vue(二十三)vuex + axios + 缓存 运用 (以登陆功能为例)

问:使用 Vue 3 和 typescript(使用 cli 构建的项目)使 vuex 存储在全球范围内可用 +已解决

如何在 Vuex 的操作中使用 axios 获取 Rest API 数据?

与 Vuex、axios 和多个组件实例进行封装数据共享

使 Vue 数据对所有组件全局可用和可访问