Vue项目中Vuex状态持久化与axios请求封装实践

"erabbit.md 是一个关于 Vue.js 应用程序中实现状态管理和请求工具封装的教程。" 在 Vue.js 开发中，状态管理是一个关键部分，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。在 `erabbit.md` 的第一个章节中，讨论了如何使用 `vuex-persistedstate` 插件来实现 Vuex 状态的持久化，确保用户在刷新页面或关闭浏览器后还能保留之前的状态。 1. **Vuex 持久化**： - 使用 `vuex-persistedstate` 插件可以将 Vuex store 中的部分状态保存到浏览器的 `localStorage` 中，这样当用户重新加载页面时，这些状态可以恢复。 - 引入插件：首先需要导入 `createPersistedstate` 函数，并在 createStore 中的 `plugins` 数组中配置它。 - 配置参数： - `key`：用于在 `localStorage` 中设置的键名，例如 'erabbit-client-pc-store'。 - `paths`：指定需要持久化的 state 路径，如 `'user'` 和 `'cart'`。如果要持久化模块内的特定状态，需包含模块名，如 `'user.token'`。 - 测试持久化：可以通过定义一个 mutation 并在主入口文件中调用来修改状态，然后检查 `localStorage` 中的数据变化。 在第二部分，文档介绍了如何基于 axios 封装一个请求工具，以便在 Vue 应用中更方便地调用 API 接口。 2. **请求工具封装**： - 创建 `src/utils/request.js` 文件，这个文件通常用于创建一个 axios 实例并进行一些全局配置和拦截器管理。 - **请求拦截器**：在发送请求前，可以添加请求拦截器来处理如 token 携带等预处理逻辑，确保每次请求都带上必要的认证信息。 - **响应拦截器**：响应拦截器则用于处理服务器返回后的数据，例如统一处理错误信息，或者对成功响应做一些通用处理。 封装好的请求工具可以提高代码的复用性和可维护性，同时通过拦截器统一管理请求和响应，能更好地处理认证、错误处理等跨接口的问题。在实际应用中，这将极大地简化 Vue 应用中的网络请求逻辑。