VUE #2 axios + vuex 处理网络请求

项目主要项目结构（本篇 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…

可以从以下几个方面排查：

1. 模块定义中是否开启了 命名空间（namespaced: true）
2. 分发 actions 时是否加了模块名（user/Register）
3. 封装模块的时候方式是否正确，main.js 中是否引入了 Vuex
4. 另一种分发 actions 的方式是使用 mapActions，本篇是使用 this.$store.dispatch的方式

下面贴出相关代码，做参考：

1. 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 前台配置跨域：

VUE #3 跨域代理配置