vuex 发请求

在 Vuex 中集成 API 请求的最佳实践
在 Vue.js 开发中，Vuex 是一种集中式的状态管理模式，而发起 HTTP 请求通常是应用与后端交互的重要部分。以下是关于如何在 Vuex 中集成 API 请求以及最佳实践的详细介绍。
使用 Actions 处理异步逻辑
根据 Vue.js 的最佳实践，在 Vuex 中应该将 AJAX 请求放置于 actions 中[^1]。这是因为 actions 被设计用来处理异步操作，并可以触发多个 mutations 来更新状态。
// store/actions.js
export const fetchData = async ({ commit }) => {
try {
const response = await axios.get('https://api.example.com/data');
commit('SET_DATA', response.data);
} catch (error) {
console.error(error);
}
};
登录后复制
上述代码展示了如何定义一个名为 fetchData 的 action，该 action 通过 Axios 向指定 URL 发送 GET 请求，并将接收到的数据提交给 mutation 进行存储。
配置 Vuex 和 Axios 插件
为了简化请求流程并增强功能，可以通过引入第三方工具如 vuex-saga-ts 或者自定义封装 Axios 实现更高效的管理方式。例如：

Vuex-Saga-TS: 如果需要更加复杂的业务流控制（比如 Sagas），可以在初始化 Vuex Store 时加载此插件[^2]。

import Vue from 'vue';
import Vuex from 'vuex';
import VuexSagaPlugin from 'vuex-saga-ts';

Vue.use(Vuex);

const sagaMiddleware = VuexSagaPlugin();

const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
plugins: [sagaMiddleware],
});

export default store;
登录后复制

Vuex ORM Axios Plugin: 此插件能够帮助开发者减少手动编写重复性的数据同步代码量[^3]。其核心在于利用拦截器机制自动完成请求前后的准备工作。

封装 Axios 提高复用性
对于大多数项目而言，直接使用原生 Axios 并对其进行适当封装是一种常见做法[^4]。这样不仅可以统一设置基础路径、超时时间等参数，还能方便地加入全局错误处理器等功能。
// utils/axiosInstance.js
import axios from 'axios';

const instance = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL,
timeout: 5000, // 设置默认超时时间为 5 秒钟
});

instance.interceptors.request.use(config => {
config.headers['Authorization'] = localStorage.getItem('token'); // 添加 token 到 header 中
return config;
}, error => Promise.reject(error));

instance.interceptors.response.use(response => response, error => {
if (!error.response || !error.response.status === 401) {
window.location.href = '/login'; // 当未授权访问资源时跳转至登录页
}
return Promise.reject(error);
});

export default instance;
登录后复制
随后即可在整个应用程序范围内重用这个实例对象来进行各种类型的 HTTP 请求。

总结
综上所述，推荐的方式是在 Vuex 的 actions 层面执行所有的网络请求任务；与此同时还可以借助一些优秀的社区贡献库进一步优化工作流程。无论是采用简单的 Axios 自定义配置还是高级别的中间件解决方案都取决于具体需求场景下的权衡考量。