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

原文地址:https://blog.51cto.com/13981400/2399144

时间: 2024-11-10 15:08:24

使用axios+vuex来调接口使数据随处可用的相关文章

【Spark篇】---Spark调优之代码调优,数据本地化调优,内存调优,SparkShuffle调优,Executor的堆外内存调优

一.前述 Spark中调优大致分为以下几种 ,代码调优,数据本地化,内存调优,SparkShuffle调优,调节Executor的堆外内存. 二.具体    1.代码调优 1.避免创建重复的RDD,尽量使用同一个RDD 2.对多次使用的RDD进行持久化 如何选择一种最合适的持久化策略? 默认情况下,性能最高的当然是MEMORY_ONLY,但前提是你的内存必须足够足够大,可以绰绰有余地存放下整个RDD的所有数据.因为不进行序列化与反序列化操作,就避免了这部分的性能开销:对这个RDD的后续算子操作,

json-server模拟后端接口处理数据

在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的. 对比过多种mock工具后,我最终选择了使用 json server 作为工具,因为它足够简单,写少量数据,即可使用.也因为它足够强大,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等.下面我将详细介绍 json server 的使用. json-

C# 调接口

上一个项目,需要mvc管理后台调接口项目,以便后期的重构扩展,调研后发现后台用的ajax请求,直接调接口可能会有跨域问题,最终在c#代码中实现了这个需求. 1,Ajax请求后台 将接口所需参数传入 2,模拟请求接口并返回json格式数据 3,将json数据反序列化 整体代码如下: public ActionResult Test(int id, int type) { var domain = CommonConst.ApiDomain; var fixedString = CommonCons

HTTP Status 415 – Unsupported Media Type(使用@RequestBody后postman调接口报错)

1.问题描述:使用springMVC框架后,添加数据接口中,入参对象没使用@RequestBody注解,造成postman发起post请求, from-data可以调通接口,但是raw调不通接口,然后我用了SpringMVC @ResponseBody 注解,调接口显示415错误处理. 处理: springmvc添加配置.注解: 1 <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHan

两种接口传送数据协议(xml和json)

规范性接口开发中,一般数据是以json或者xml的格式传送的,而不是字符串的形式直接返回给接口调用者:下面介绍这两种格式的编写方法. 下面两种数据传送方式是接口输出端的编写.需引入的包如下: <span style="font-family:KaiTi_GB2312;font-size:18px;">importjava.io.PrintWriter; importjava.io.StringWriter; importjavax.servlet.http.HttpServ

利用SPM工具运行自己创建的小组件(使用common-model向后台接口请求数据)

步骤如下: 1.安装依赖:spm install -e 2.编译:spm build (编译好的东西会放在trunk-dist里面) 3.发布:spm app -d (会出来一个export端口,一般是:4745) 4.在浏览器中输入:http://localhost:4745/examples/index.html  即可运行 如果出错了,出bug了,修改完,重新操作2.3.4.三个步骤. for example: 1.组件架构如下: 2.代码:package.jon 配置信息(一些依赖):

ajax对一些没有接口的数据进行分析和添加方法

对于一些没有接口的数据进行分析和添加方法: <script src="ajax.js"><script>//插入ajax文件 <script> window.onload=function(){ ajax('get','getPics.php','cpage=1',function(data){ //调用ajax函数传一个get方式url=getPics.php,初始化的时候capage=1(不传也可以),最后回到函数function(data),利

批量操作取值调接口

批量操作取值调接口 selectionChange(val) { var arr = [];//数组置空 if(val.length) {/////////////切记,判断取值数组的的长度 for(var i = 0; i < val.length; i++) { arr.push(val[i].id)//追加你需要的id this.selectedId = arr } this.selectShow = true } else { this.selectedId = []//切记没值的时候还

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态