Vue (23) Vuex + Axios + cache usage (for example, login function)

(i) Axios package

(1) Axios Interceptor

The loaded code can be added to the Axios ...

(2) Package request

Each subsequent request interface can be written in this ...

(ii) Vuex

User.js

Import {login} from ' @/api/login 'Const State={userInfo:NULL,}const getters={Get_userinfo (state) {Let UserInfo=State.userinfoif(!userInfo) {UserInfo= Window.localStorage.getItem (' UserInfo ')    }    returnjson.parse (UserInfo)}} Const Mutations={set_userinfo (state, data) {State.userinfo=Data Window.localStorage.setItem (' UserInfo ', State.userinfo)}} Const Actions={Login (context, {username, password}) {return NewPromise (Resolve, reject) ={login (username, password). Then (response={context.commit (' Set_userinfo ', Response.data.rtnInfo) Resolve (response)}, error={reject (Error)})}) }}exportdefault{State, getters, mutations, actions}

(1) Create a state-userinfo save user information

(2) Getters-get_userinfo get user information, read cache

(3) Mutations-set_userinfo each login, save the user information in the cache

(4) The Login interface in the Action-login call API

Sign-in operation

Inject user into the Index.js

Introduction of Store-index.js in Main.js

(iii) Use of components

Login.vue

<template> <div id= "Login" >  <el-form class=" login-form ": model=" Ruleform "ref=" Ruleform "> <el-form-it em> <el-input type= "text" placeholder= "User name" v-model= "Ruleform.username" prefix-icon= "Iconfont icon-user" Clea Rable auto-complete= "Off" ></el-input> </el-form-item> <el-form-item> <el-input ty pe= "password" placeholder= "password" 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) "> Login </el-button> </ el-form-item> </el-form>  </div></template><script>Exportdefault{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 (' User name or password cannot be null ')         This. Loading =false      } Else {        //Login         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:90D; padding:30px10%; 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>

In the login submission, call the method in store

this. $store. Dispatch (' Login ', {' username ': formname.username, ' Password ': Formname.password})

Incoming user name and password

Vue (23) Vuex + Axios + cache usage (for example, login function)