Vue（二十三）vuex + axios + 緩衝 運用 （以登陸功能為例）

標籤：擷取使用者資訊   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 + 緩衝 運用 （以登陸功能為例）