Vuex中actions如何优雅处理接口请求
前言
在项目开发中,如果使用到了 vuex
,通常我会将所有的接口请求单独用一个文件管理,而业务逻辑写在 actions
中,一方面方便统一管理项目中的所有请求,其次代码结构更加清晰,最重要的是可以全局性的处理一些统一的业务逻辑,例如接口入参调整等一些项目中通用的代码。
优点
在 Vuex 中处理 HTTP 请求有几个好处:
集中化:通过在 Vuex 中处理 HTTP 请求,您可以集中管理您的数据,并更容易跟踪应用程序中发生的事情。
可重用性:通过将数据存储在 store 中,您可以轻松地跨多个组件重用它,减少重复代码并提高可维护性。
关注点分离:Vuex 允许您将数据管理与数据在 UI 中的呈现分开。这使得推理和调试您的应用程序变得更加容易。
一致性:通过以集中和一致的方式处理 HTTP 请求,您可以确保您的数据始终是最新的,并且您的应用程序的状态保持一致。
可预测性:通过使用 Vuex,您可以利用其可预测和集中的数据管理,使您的应用程序更加可靠和无错误。
总的来说,在 Vuex 中处理 HTTP 请求可以改进代码的结构和组织,随着时间的推移,可以更轻松地开发和维护应用程序。
文件结构
在项目中完整的一套流程大致可以分为三部分:
- api.js
这个文件通常只用来存放项目中用到的所有接口,可以理解为接口url
的管理文件。简单的请求示例如下:
import request from "@/utils"; // request可以是一个封装方法,用于发送http请求,通常返回Promise
const domin = "http://....."; // domin为服务端对应环境的域名
export const getUserInfo = (params) => {
return request(`${domin}/接口`, "GET", params);
};
- store.js
这个文件为vuex
管理文件,用来管理接口调用逻辑,以及全局性的入参处理等逻辑。简单示例如下:
// 此处引入接口地址
import { getUserInfo } from "@/api";
export default {
state: {
userInfo: null,
},
mutations: {
setUserInfo(state, data) {
state.userInfo = data;
},
},
actions: {
// 命名可以直接后边加Action
getUserInfoAction({ commit, state }, params) {
const apiParams = {
// 对params进行转换,转换成接口需要的入参格式
};
let tempObj = {}; // 此作用域的全局对象,临时变量作用
getUserInfo(apiParams)
.then((res) => {
// 处理返回结果,例如转换成对应的符合业务需求的数据结构
})
.catch((err) => {
// 处理异常,即异常状态下数据应该是什么样子
})
.finally(() => {
// 存入state;也可以用来执行一些请求结束的提示操作,例如展示toast弹窗等
commit("setUserInfo", tempObj);
});
},
},
};
- xxx.vue
这里代表对应的页面,也就是与vuex
直接交互的地方。简单示例如下:
<template>
<h1>{{ userInfo }}</h1>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
data() {
return {
myData: {},
};
},
computed: {
...mapState("user", ["userInfo"]),
},
methods: {
...mapActions("user", ["getUserInfoAction"]),
},
mounted() {
// 这里myData作为组件产生的数据,根据实际业务需求来决定是否作为参数传递
this.getUserInfoAction(this.myData);
},
};
</script>
以上内容为个人的工作经验理解,能力有限可能不是最佳方案,今后如有更好的思路我会对随笔内容编辑优化。