本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一.找到登录页面的路径

src/views/login/index.vue

提交表单

@click.native.prevent="handleLogin"

二.调用登录页面handleLogin()方法

src/views/login/index.vue

handleLogin(){ this.refs.loginForm.validate(valid =>{ if(valid){ this.store.dispatch('user/login',this.loginForm) } }) }

三.调用store目录下的user.js中的login方法

src/store/user.js

login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login({ username: userna说me.trim(), password: password }).then(response => { const { data } = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }

四.调用api目录下的user.js中的login方法

src/api/user.js

export function login(data) { return request({ url: '/vue-element-admin/user/login', method: 'post', data }) }

最后调用axios发送请求写自己的业务需求

/utils/request

axios请求封装