面试题：Vuex在大规模Vue项目中如何优化状态管理性能

Vuex模块分割

理解：
- 随着Vue项目规模增大，将所有状态、mutation、action等都放在一个Vuex store中会使代码难以维护和管理。模块分割就是把Vuex store按照功能拆分成多个模块，每个模块有自己的state、mutation、action等。这样可以使代码结构更清晰，不同模块的开发和维护可以独立进行，降低模块间的耦合度。
应用举例：假设一个电商项目，有用户模块、商品模块、购物车模块等。可以将它们分别定义为独立的Vuex模块。

// user.js
const state = {
    userInfo: null
};
const mutations = {
    SET_USER_INFO(state, info) {
        state.userInfo = info;
    }
};
const actions = {
    async fetchUserInfo({ commit }) {
        const response = await axios.get('/api/userInfo');
        commit('SET_USER_INFO', response.data);
    }
};
export default {
    namespaced: true,
    state,
    mutations,
    actions
};

// product.js
const state = {
    products: []
};
const mutations = {
    SET_PRODUCTS(state, products) {
        state.products = products;
    }
};
const actions = {
    async fetchProducts({ commit }) {
        const response = await axios.get('/api/products');
        commit('SET_PRODUCTS', response.data);
    }
};
export default {
    namespaced: true,
    state,
    mutations,
    actions
};

// 在main.js中引入模块
import Vue from 'vue';
import Vuex from 'vuex';
import user from './store/user';
import product from './store/product';

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        user,
        product
    }
});

new Vue({
    el: '#app',
    store,
    render: h => h(App)
});

这里通过namespaced: true确保模块内的状态、mutation、action等具有独立的命名空间，避免命名冲突。

状态缓存

理解：
- 在Vuex中，状态缓存是指对于一些不经常变化且获取成本较高的数据，将其缓存起来，避免重复获取和计算，从而提升性能。例如一些从后端接口获取的配置信息，只要应用运行期间不发生变化，就不需要重复请求。
应用举例：假设要获取网站的一些全局配置信息，这些信息在应用运行期间基本不变。

const state = {
    globalConfig: null
};
const mutations = {
    SET_GLOBAL_CONFIG(state, config) {
        state.globalConfig = config;
    }
};
const actions = {
    async fetchGlobalConfig({ commit, state }) {
        if (state.globalConfig) {
            return state.globalConfig;
        }
        const response = await axios.get('/api/globalConfig');
        commit('SET_GLOBAL_CONFIG', response.data);
        return response.data;
    }
};

这里在fetchGlobalConfig action中，首先检查state.globalConfig是否已经有值，如果有则直接返回缓存的值，避免了重复的网络请求。

星途面试题库

面试题：Vuex在大规模Vue项目中如何优化状态管理性能

知识考点

面试题答案

Vuex模块分割

状态缓存