Ant Design Pro of Vue 网络流程分析

以登录为例进行网络流程记录分析，希望多给意见哈

首先从用户点击登录开始

登录代码位于   src/view/user/Login.vue

<a-form
    id="formLogin"
    class="user-layout-login"
    ref="formLogin"
    :form="form"
    @submit="handleSubmit"
>

点击对应的事件是 handleSubmit,代码位于同一文件

methods: {
    ...mapActions(['Login', 'Logout']),
    // 一些校验代码
    
    handleSubmit (e) {
      e.preventDefault()
      const {
        form: { validateFields },
        state,
        customActiveKey,
        Login
      } = this

      state.loginBtn = true

      const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha']

      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          console.log('login form', values)
          const loginParams = { ...values }
          delete loginParams.username
          loginParams[!state.loginType ? 'email' : 'username'] = values.username
          loginParams.password = md5(values.password)
          # 实际的登录动作在这
          Login(loginParams)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              state.loginBtn = false
            })
        } else {
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })
    },
    
  }

其中  ...mapActions(['Login', 'Logout'])用来把actions函数绑定到methods里面

简单解释就是mapActions就是把store中的action绑定到method里，而 vuex用的同一个store，所以在/src/store/index.js中可以找到如下代码

import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    user,
    permission
  },
})

所以去 ./modules/user中去找对应的actions

详细原理解释在此  https://vuex.vuejs.org/zh/

 login所绑定的实现位于 src/store/modules/user.js，实现如下：

import Vue from 'vue'
import { login, getInfo, logout } from '@/api/login'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { welcome } from '@/utils/util'

const user = {
  ...
  actions: {
    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const result = response.result
          Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
}

而其中的login是位于 api/login,实现如下

export function login (parameter) {
  return axios({
    url: '/auth/login',
    method: 'post',
    data: parameter
  })
}

最终实现了网络发送