前言
在项目开发中,如果使用到了 vuex
,通常我会将所有的接口请求单独用一个文件管理,而业务逻辑写在 actions
中,一方面方便统一管理项目中的所有请求,其次代码结构更加清晰,最重要的是可以全局性的处理一些统一的业务逻辑,例如接口入参调整等一些项目中通用的代码。
文件结构
在项目中完整的一套流程大致可以分为三部分:
1.api.js
这个文件通常只用来存放项目中用到的所有接口,可以理解为接口 url
的管理文件。简单的请求示例如下:
import request from "@/utils"; // request可以是一个封装方法,用于发送http请求,通常返回Promise const domin = "http://....."; // domin为服务端对应环境的域名 export const getUserInfo = (params) => { return request(`${domin}/接口`,"GET",params); };
2.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); }); },};
3.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>