面试题：Vue3的Vuex中如何实现网络请求状态的模块化管理

Question

在一个大型Vue3项目中，有多种类型的网络请求（如用户模块、商品模块等），为了便于管理和维护，需要对每个模块的网络请求状态在Vuex中进行模块化管理。请阐述实现思路，并说明如何处理模块间状态的共享与交互，给出关键代码结构。

Answer 1

实现思路

1. Vuex 模块化：将每个模块（用户模块、商品模块等）的网络请求状态相关逻辑封装在各自的 Vuex 模块中。这样每个模块都有自己独立的 state、mutations、actions 等，便于管理和维护。
2. 请求状态管理：在每个模块的 state 中定义不同的请求状态，比如 loading（表示请求中）、success（表示请求成功）、error（表示请求失败）。在 actions 中发起网络请求，并根据请求结果通过 mutations 来更新相应的状态。
3. 模块间状态共享与交互：对于需要共享的状态，可以将其提取到 Vuex 的根状态中。模块间的交互可以通过 actions 来触发其他模块的 mutations 进行状态更新。

处理模块间状态的共享与交互

1. 共享状态：将共享状态定义在 Vuex 的根 state 中，各模块可以通过 this.$store.state 来访问。例如，如果有一个全局的加载状态，在根 state 中定义 globalLoading。
2. 交互：模块 A 的 action 可以通过 this.$store.dispatch 触发模块 B 的 action，进而更新模块 B 的状态。比如模块 A 完成一个操作后，需要通知模块 B 更新数据。

关键代码结构

1. Vuex 模块结构

   // userModule.js
   const userModule = {
     namespaced: true,
     state: () => ({
       userLoading: false,
       userSuccess: false,
       userError: null
     }),
     mutations: {
       SET_USER_LOADING(state, payload) {
         state.userLoading = payload;
       },
       SET_USER_SUCCESS(state, payload) {
         state.userSuccess = payload;
       },
       SET_USER_ERROR(state, payload) {
         state.userError = payload;
       }
     },
     actions: {
       async getUserData({ commit }) {
         commit('SET_USER_LOADING', true);
         try {
           const response = await axios.get('/api/user');
           commit('SET_USER_SUCCESS', true);
           commit('SET_USER_LOADING', false);
         } catch (error) {
           commit('SET_USER_ERROR', error.message);
           commit('SET_USER_LOADING', false);
         }
       }
     }
   };
   
   // productModule.js
   const productModule = {
     namespaced: true,
     state: () => ({
       productLoading: false,
       productSuccess: false,
       productError: null
     }),
     mutations: {
       SET_PRODUCT_LOADING(state, payload) {
         state.productLoading = payload;
       },
       SET_PRODUCT_SUCCESS(state, payload) {
         state.productSuccess = payload;
       },
       SET_PRODUCT_ERROR(state, payload) {
         state.productError = payload;
       }
     },
     actions: {
       async getProductData({ commit }) {
         commit('SET_PRODUCT_LOADING', true);
         try {
           const response = await axios.get('/api/product');
           commit('SET_PRODUCT_SUCCESS', true);
           commit('SET_PRODUCT_LOADING', false);
         } catch (error) {
           commit('SET_PRODUCT_ERROR', error.message);
           commit('SET_PRODUCT_LOADING', false);
         }
       }
     }
   };
   

2. Vuex 根状态与模块注册

   // store.js
   import { createStore } from 'vuex';
   import userModule from './userModule';
   import productModule from './productModule';
   
   const store = createStore({
     state: {
       globalLoading: false
     },
     modules: {
       user: userModule,
       product: productModule
     }
   });
   
   export default store;
   

3. 模块间交互示例

   // userModule.js
   const userModule = {
     namespaced: true,
     //...其他代码
     actions: {
       async updateUserData({ commit, dispatch }) {
         // 更新用户数据
         try {
           const response = await axios.put('/api/user', { /* 数据 */ });
           // 通知商品模块刷新数据
           dispatch('product/getProductData', null, { root: true });
         } catch (error) {
           console.error('更新用户数据错误', error);
         }
       }
     }
   };