vuex html5存储,2.封装axios、本地存储，安装vuex、element

项目地址

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

html5 Web存储

当用户登录后，前端需要存一些必要信息，比如用户名，token，登录状态等等，这里用到vuex和本地存储(vuex存储后虽然能够做到数据响应但是却干不过刷新，所以需要本地存储)

操作本地存储步骤比较麻烦，这里简单封装下

src下新建tools用来放各种工具

// src/tools目录下新建storage.js

let storage = {

get(key) {

return window.sessionStorage.getItem(key);

},

set(key, val) {

window.sessionStorage.setItem(

key,

typeof val !== "string" ? JSON.stringify(val) : val

);

},

del(key) {

window.sessionStorage.removeItem(key);

},

cle() {

window.sessionStorage.clear();

}

};

export default storage;

添加vuex，封装axios，引入element

安装依赖

npm install axios --save

npm install element-ui --save

npm install vuex --save

引入 main.js添加以下配置

// src/main.js

// element

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

//sotre

import store from "./store";

//storage

import storage from "./tools/storage";

Vue.prototype.Storage = storage;

Vue.use(ElementUI);

new Vue({

el: "#app",

router,

store,

components: { App },

template: ""

});

vuex使用

src下新建store文件

store文件下新建index.js作为入口文件

// /src/store/index.js

import Vue from 'vue';

import Vuex from 'vuex';

import user from './modules/user';

Vue.use(Vuex);

export default new Vuex.Store({

modules: {

user

}

});

store文件下新建modules区分各个模块

modules下新建user.js用户模块

// /src/store/modules/user.js

import Storage from "@/tools/storage";

const state = {

//token

token: Storage.get("token")

};

const actions = {

setToken({ commit }, data) {

commit("setToken", data);

}

};

const mutations = {

setToken(state, data) {

Storage.set("token", data);

state.token = Storage.get("token");

}

};

export default {

state,

actions,

mutations

};

封装Axios

tools文件下新建request.js

import axios from "axios";

import { Message } from "element-ui";

import store from "@/store";

//创建axios

const service = axios.create({

//这里baseurl就是刚开始配置的开发环境和线上环境地址，webpack会自动读取无需手动再改

baseURL: process.env.BASE_URL, //baseurl

timeout: 20000 //请求超时

});

//request拦截

//请求拦截主要作用是验证请求是否合法，会带有用户token，这里模拟一个token，可以根据实际情况修改

service.interceptors.request.use(

config => {

let token = store.state.user.token;

if (store.state.user.token) {

config.headers["rty-token"] = token;

}

return config;

},

err => {

console.log(err);

Promise.reject(err);

}

);

//respone拦截

//响应拦截主要是对返回做统一处理

service.interceptors.response.use(

response => {

let res = response.data;

let { data, code } = res;

// console.log(response)

if (code !== 200) {

Message({

message: res.data.message,

type: "error",

duration: 5 * 1000

});

if (res.code === 5000) {

console.log("token过期");

}

return false;

} else {

//这里吧错误响应不再返回到页面，直接统一处理掉，只有正确的返回才会被接收并做下一步处理

return data;

}

},

err => {

//这里处理服务端错误

console.log("err" + err); // for debug

Message({

message: err.message,

type: "error",

duration: 5 * 1000

});

return Promise.reject(err);

}

);

export default service;

src下新建api文件夹

api文件下新建user.js写用户请求

import service from "@/tools/request";

export function login({ username, password }) {

return service({

url: "/user/login",

method: "post",

data: {

username,

password

}

});

}

测试请求

在helloworld.vue中测试发送请求

// html

发送请求

// js

import { login } from "@/api/user";

export default {

name: "HelloWorld",

data() {

return {

loginForm: {

username: "rty",

password: 123

}

};

},

methods: {

async sendRequest() {

let res = await login(this.loginForm);

console.log(res);

}

}

};

点击发送请求，在network中查看返回的数据

请求成功