面试题：Vue中Vuex状态管理之模块划分

Question

在Vue项目中，假设项目具有用户模块、订单模块等多个功能模块，如何利用Vuex进行模块划分？请说明模块划分的好处以及在模块中如何处理状态、mutations、actions等。

Answer 1

模块划分方法

在Vuex中，可以通过modules选项来进行模块划分。例如：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import order from './modules/order'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user,
    order
  }
})

在src/store/modules目录下分别创建user.js和order.js文件来定义各自模块的状态、mutations、actions等。例如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 {
  state,
  mutations,
  actions
}

模块划分的好处

1. 代码组织清晰：每个功能模块的相关状态管理代码集中在一个文件中，便于维护和理解。例如，用户模块的状态、mutations和actions都在user.js中，订单模块在order.js中，不会出现代码混乱的情况。
2. 便于复用：如果项目中有多个地方需要用到相同的状态管理逻辑，如用户登录状态的管理，在模块划分后可以方便地复用user模块。
3. 可扩展性强：当项目新增功能模块时，只需在modules目录下新增对应的模块文件，并在store/index.js中引入注册即可，不会影响其他模块。

模块中状态、mutations、actions处理

1. 状态（state）：模块中的状态是独立的，互不干扰。每个模块的状态只负责管理本模块相关的数据。例如user模块管理用户相关信息，order模块管理订单相关信息。
2. mutations：mutations用于直接修改状态。命名规范通常以动词开头，描述对状态的操作。例如SET_USER_INFO。在模块中，mutations只能修改本模块的状态，这样可以保证状态修改的清晰和可追踪。
3. actions：actions用于处理异步操作或者复杂的业务逻辑，并且通过commit来触发mutations从而修改状态。例如在user模块中通过fetchUserInfo action异步获取用户信息并提交到mutations。不同模块的actions也是相互独立的，方便各个模块独立开发和维护。