面试题：Vuex在大型项目中的架构优化与实践

组织模块结构

按业务模块划分：将不同的业务功能划分为独立的Vuex模块。例如在电商项目中，用户模块（user）管理用户登录、注册、信息修改等状态；商品模块（product）管理商品列表、详情、库存等状态。这样每个模块职责清晰，便于开发、维护和测试。
模块的嵌套与组合：对于复杂业务模块，可进一步细分嵌套模块。如订单模块下可再有订单列表、订单详情等子模块，增强模块的可维护性和复用性。

处理异步操作以提高性能

使用actions：Vuex的actions专门用于处理异步操作。比如在获取商品列表时，通过actions调用后端API，在请求发出时，设置loading状态为true，在请求成功或失败后，设置loading为false，便于在视图中显示加载状态，提高用户体验。
利用Promise和async/await：在actions中使用Promise链式调用或async/await语法，让异步操作更易于管理和阅读。例如：

actions: {
  async fetchProductList({ commit }) {
    try {
      const response = await axios.get('/api/products');
      commit('SET_PRODUCT_LIST', response.data);
    } catch (error) {
      console.error('Error fetching product list:', error);
    }
  }
}

缓存数据：对于不经常变化的数据，如商品分类，在获取后进行缓存。下次请求时先检查缓存，若有则直接使用，减少不必要的API调用，提高性能。

状态的持久化存储

使用localStorage或sessionStorage：对于一些需要在页面刷新或关闭后仍保留的状态，如用户登录信息、用户设置等，可使用localStorage进行存储。在Vuex的mutation中，当状态发生变化时，同步更新localStorage。例如：

mutations: {
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo;
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
  }
}

在项目初始化时，从localStorage读取数据并设置到Vuex状态中：

const userInfo = localStorage.getItem('userInfo');
if (userInfo) {
  store.commit('SET_USER_INFO', JSON.parse(userInfo));
}

IndexedDB：对于大量数据的持久化存储，可使用IndexedDB。它比localStorage更适合存储复杂数据结构和大量数据，如离线缓存的商品数据等。

与后端API进行高效的交互

封装API请求：将所有与后端交互的API请求封装在一个独立的文件或模块中。这样便于统一管理请求地址、请求头、错误处理等。例如：

import axios from 'axios';

const api = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json'
  }
});

api.interceptors.response.use(
  response => response.data,
  error => {
    console.error('API Error:', error);
    return Promise.reject(error);
  }
);

export const fetchProductList = () => api.get('/products');
export const createOrder = data => api.post('/orders', data);

批量请求：对于多个需要同时获取数据的API请求，可使用Promise.all进行批量请求，减少请求次数，提高效率。如在订单详情页面，同时需要获取订单信息、商品信息和用户信息：

actions: {
  async fetchOrderDetails({ commit }) {
    const [orderResponse, productResponse, userResponse] = await Promise.all([
      axios.get('/api/orders/1'),
      axios.get('/api/products/order1Products'),
      axios.get('/api/users/order1User')
    ]);
    commit('SET_ORDER_DETAILS', {
      order: orderResponse.data,
      products: productResponse.data,
      user: userResponse.data
    });
  }
}

优化请求频率：对于频繁触发的请求，如搜索框实时搜索，使用防抖（debounce）或节流（throttle）技术，减少不必要的请求。例如使用lodash的debounce函数：

import { debounce } from 'lodash';

export const searchProducts = debounce(async (query) => {
  const response = await axios.get('/api/products/search', {
    params: { query }
  });
  // 处理响应
}, 300);

星途面试题库

面试题：Vuex在大型项目中的架构优化与实践

知识考点

面试题答案

组织模块结构

处理异步操作以提高性能

状态的持久化存储

与后端API进行高效的交互