（一）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 + 緩存 運用 （以登陸功能為例）