本篇分为以下几步
项目主要项目结构(本篇 VUE 版本 3.0 !!!!):
src
├── main.js
├── api
│ └── login.js # 后台请求
├── utils
│ └── request.js # 请求实例定义
├── views # 页面
│ └── Home.vue
└── store
├── index.js # 组装模块并导出 store 的地方
└── modules
└── user.js # 用户模块
一、定义请求实例(request.js)
import axios from 'axios'
//创建axios实例
const request = axios.create({
timeout: 60000 //请求超时时间
})
export default request
二、封装 API 请求(login.js)
import request from '../utils/request';
export default {
login(userName, password) {
return request({
url: '/user/login',
method: 'post',
data: {
userName,
password
}
});
},
register(userName, password, email) {
return request({
url: '/user/register',
method: 'post',
data: {
userName,
password,
email
}
});
}
}
三、定义 Vuex 模块 (user.js)
import login from "../../api/login";
const user = {
namespaced: true, //这里,开启命名空间
state: {
},
mutations: {
},
actions: {
//登录
//定义 Login 方法,在组件中使用 this.$store.dispatch("user/Login") 调用
Login({commit}, userInfo) {
const userName = userInfo.userName.trim();
//封装一个 Promise
return new Promise((resolve, reject) => {
//使用 login 接口进行网络请求
login.login(userName, userInfo.password).then(response => {
//提交一个 mutation,通知状态改变
commit('');
//将结果封装进 Promise
resolve(response);
}).catch(error => {
reject(error);
})
})
},
//注册
//定义 Register方法,在组件中使用 this.$store.dispatch("user/Register") 调用
Register({commit}, userInfo) {
return new Promise((resolve, reject) => {
login.register(userInfo.userName, userInfo.password, userInfo.email).then(response => {
//提交一个 mutation,通知状态改变
commit('');
//将结果封装进 Promise
resolve(response);
}).catch(error => {
reject(error);
})
})
}
}
}
export default user
四、封装 Vuex 模块(index.js )
import { createStore } from 'vuex'
//引入模块
import user from './modules/user'
const store = createStore({
//封装模块,多模块用逗号","隔开
modules: {
user
}
})
export default store
注意在根目录的 main.js 中引入 Vuex ,因为安装 Vuex 时这一步会默认配置好,这里不赘述~~~
五、页面调用 Vuex
...
export default {
methods: {
//表单提交方法
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//这里!!!
this.$store.dispatch("user/Register", this.registerForm);
} else {
console.log("error submit!!");
return false;
}
});
}
}
}
六、效果
以上就是主要步骤。如果在请求过程中,报错:
[vuex] unknown action type…
可以从以下几个方面排查:
- 模块定义中是否开启了 命名空间(namespaced: true)
- 分发 actions 时是否加了模块名(user/Register)
- 封装模块的时候方式是否正确,main.js 中是否引入了 Vuex
- 另一种分发 actions 的方式是使用 mapActions,本篇是使用 this.$store.dispatch的方式
下面贴出相关代码,做参考:
- main.js
import './plugins/axios'
import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
import router from './router' //引入路由
import store from './store'
//这里定义了 App 页面使用路由,那么去 ./App.vue 页面配置路由显示内容
const app = createApp(App).use(store).use(router)
installElementPlus(app)
app.mount('#app')
前端可以发送请求了,但并不意味着后台就可以正常接收请求了,还需要配置跨域代理,跨域前后台都可以做处理,简单记录一下在 VUE 前台配置跨域: