Vue(二十三)vuex + axios + 缓存 运用 (以登陆功能为例)
(一)axios 封装
(1)axios拦截器
可以在axios中加入加载的代码。。。
(2)封装请求
后期每个请求接口都可以写在这个里面。。。
(二)vuex
user.js
import { login } from '@/api/login' const state = { userInfo: null, } const getters = { get_userInfo (state) { let userInfo = state.userInfo if (!userInfo) { userInfo = window.localStorage.getItem('userInfo') } return JSON.parse(userInfo) } } const mutations = { set_userInfo (state, data) { state.userInfo = data window.localStorage.setItem('userInfo', state.userInfo) } } const actions = { Login (context, {username, password}) { return new Promise((resolve, reject) => { login(username, password).then(response => { context.commit('set_userInfo', response.data.rtnInfo) resolve(response) }, error => { reject(error) }) }) } } export default { state, getters, mutations, actions }
(1)创建一个state - userInfo 保存用户信息
(2)getters - get_userInfo 获取用户信息,读取缓存
(3)mutations - set_userInfo 每次登录,将用户信息保存在缓存中
(4)action - Login 调用api中的login接口
进行登录操作
在index.js 中注入 user
在main.js中 引入store - index.js
(三)组件中运用
Login.Vue
<template> <div id="login"> <img class="login-icon01" src="../../static/images/login02.png"> <el-form class="login-form" :model="ruleForm" ref="ruleForm"> <el-form-item> <el-input type="text" placeholder="用户名" v-model="ruleForm.username" prefix-icon="iconfont icon-user" clearable auto-complete="off"></el-input> </el-form-item> <el-form-item> <el-input type="password" placeholder="密码" v-model="ruleForm.password" prefix-icon="iconfont icon-password" clearable auto-complete="off"></el-input> </el-form-item> <el-form-item> <el-button class="login-btn" type="primary" :loading="loading" @click="submitForm(ruleForm)">登录</el-button> </el-form-item> </el-form> <img class="login-icon03" src="../../static/images/login01.png"> </div> </template> <script> export default { data () { return { loading: false, // urlIbest: this.$store.state.User.urlIbest, ruleForm: { username: '', password: '' } } }, methods: { submitForm (formName) { this.loading = true if (formName.username === '' || formName.password === '') { this.$message.error('用户名或密码不能为空') this.loading = false } else { // 登录 this.$store.dispatch('Login', {'username': formName.username, 'password': formName.password}).then(response => { if (response.data && response.data.rtnCode === '00000000') { this.loading = false this.$router.push('/home') } else { this.$message.error(response.data.rtnMsg) this.loading = false } }) } } } } </script> <style lang="less" scoped> #login { background-color: #2f329f; position: fixed; top:0; left:0; right:0; bottom:0; margin:auto; .login-form{ width: 80%; padding: 30px 10%; background: rgba(47,50,159,.3); position: absolute; z-index: 8; top: 120px; .el-input__inner{ padding-top:8px; padding-bottom:8px; background-color:transparent!important; color:#fff; } .login-btn{ width:100%; background-color:#fff; color:#2f329f; border:none; margin-top:20px; } } .login-icon01{ position: absolute; width: 20%; right: 15%; top: 60px; z-index: 10; } .login-icon02{ position: absolute; width: 50%; bottom:20px; left:0; right:0; margin:auto; z-index:2; } .login-icon03{ position: absolute; width: 110%; left: 0; right: 0; bottom: 0; margin-left: -5%; z-index: 1; } } </style>
在登录提交中,调用store中方法
this.$store.dispatch('Login', {'username': formName.username, 'password': formName.password})
传入用户名和密码