以登录为例进行网络流程记录分析,希望多给意见哈
首先从用户点击登录开始
登录代码位于 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
})
}
最终实现了网络发送