標籤:擷取使用者資訊 home hold promise from mod temp type AC
(一)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})
傳入使用者名稱和密碼
Vue(二十三)vuex + axios + 緩衝 運用 (以登陸功能為例)