编辑“︁Vuex Modules”︁（章节）

= Vuex Modules =

== 介绍 ==
'''Vuex Modules''' 是 Vuex 状态管理库的核心功能之一，用于将大型应用的状态树拆分为多个模块。每个模块可以拥有自己的 state、mutations、actions、getters，甚至嵌套子模块。这种结构特别适合中大型项目，能有效解决单一状态树臃肿的问题，同时保持代码组织清晰。

主要特点：
* '''命名空间'''：默认情况下模块的 actions/mutations/getters 注册在全局命名空间，可通过 <code>namespaced: true</code> 启用局部命名空间
* '''局部状态'''：模块内部的 mutations 和 getters 接收的第一个参数是模块的局部状态
* '''可组合性'''：模块支持多层嵌套，形成树状结构

== 基础结构 ==
一个典型的模块定义如下：

<syntaxhighlight lang="javascript">
const myModule = {
  namespaced: true,  // 启用命名空间
  state: () => ({
    count: 0
  }),
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementIfOdd({ state, commit }) {
      if (state.count % 2 === 1) {
        commit('increment')
      }
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
}
</syntaxhighlight>

== 模块注册 ==
在创建 Vuex store 时通过 <code>modules</code> 选项注册：

<syntaxhighlight lang="javascript">
import { createStore } from 'vuex'

const store = createStore({
  modules: {
    moduleA: myModule,
    moduleB: anotherModule
  }
})
</syntaxhighlight>

== 命名空间访问 ==
启用命名空间后，需要通过路径访问模块成员：

{| class="wikitable"
|-
! 访问类型 !! 语法示例
|-
| State | <code>store.state.moduleA.count</code>
|-
| Getter | <code>store.getters['moduleA/doubleCount']</code>
|-
| Mutation | <code>store.commit('moduleA/increment')</code>
|-
| Action | <code>store.dispatch('moduleA/incrementIfOdd')</code>
|}

== 模块局部上下文 ==
在命名空间模块内部：
* <code>commit</code> 和 <code>dispatch</code> 会自动绑定到当前模块
* 可以通过 <code>rootState</code> 和 <code>rootGetters</code> 访问根状态

<syntaxhighlight lang="javascript">
actions: {
  logRootCount({ rootState }) {
    console.log(rootState.someRootValue)
  }
}
</syntaxhighlight>

== 动态模块注册 ==
可以通过 <code>store.registerModule</code> 在运行时动态注册模块：

<syntaxhighlight lang="javascript">
// 注册模块
store.registerModule('dynamicModule', {
  state: () => ({ dynamicValue: 42 })
})

// 卸载模块
store.unregisterModule('dynamicModule')
</syntaxhighlight>

== 模块复用 ==
当需要创建多个相同结构的模块实例时，使用函数返回模块定义：

<syntaxhighlight lang="javascript">
const createCounterModule = (initialValue) => ({
  state: () => ({ count: initialValue }),
  mutations: { /* ... */ }
})

store.registerModule('counterA', createCounterModule(0))
store.registerModule('counterB', createCounterModule(10))
</syntaxhighlight>

== 实际案例 ==
'''电商网站购物车模块'''

<mermaid>
stateDiagram-v2
  [*] --> cart
  cart --> products
  cart --> coupons
  cart --> checkout
  checkout --> payment
  checkout --> shipping
</mermaid>

对应模块结构：
<syntaxhighlight lang="javascript">
const cartModule = {
  namespaced: true,
  state: () => ({
    items: [],
    discount: 0
  }),
  mutations: {
    addItem(state, product) {
      state.items.push(product)
    },
    applyDiscount(state, amount) {
      state.discount = amount
    }
  },
  modules: {
    checkout: checkoutModule  // 嵌套子模块
  }
}

const checkoutModule = {
  namespaced: true,
  state: () => ({
    shippingMethod: 'standard',
    paymentStatus: 'pending'
  }),
  actions: {
    async submitOrder({ commit }) {
      // 处理订单提交逻辑
    }
  }
}
</syntaxhighlight>

== 最佳实践 ==
1. '''命名一致性'''：使用统一命名规范（如全小写加下划线）
2. '''适度拆分'''：避免过度模块化导致管理复杂度上升
3. '''类型安全'''：在 TypeScript 项目中为每个模块定义接口
4. '''懒加载'''：结合 Vue 路由实现模块的异步加载

== 常见问题 ==
'''Q: 如何在 action 中调用其他模块的 action？'''
A: 使用 <code>{ root: true }</code> 选项：
<syntaxhighlight lang="javascript">
actions: {
  crossModuleAction({ dispatch }) {
    dispatch('otherModule/actionName', null, { root: true })
  }
}
</syntaxhighlight>

'''Q: 模块热更新如何实现？'''
A: 使用 webpack 的 HMR API：
<syntaxhighlight lang="javascript">
if (module.hot) {
  module.hot.accept(['./modules/moduleA'], () => {
    store.hotUpdate({
      modules: {
        moduleA: require('./modules/moduleA').default
      }
    })
  })
}
</syntaxhighlight>

== 数学表示 ==
模块化状态树可以表示为：
<math>
S = \begin{cases}
S_1 & \text{模块1状态} \\
S_2 & \text{模块2状态} \\
\vdots \\
S_n & \text{模块n状态}
\end{cases}
</math>

其中整体状态 <math>S</math> 是各模块状态 <math>S_i</math> 的并集。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vuex状态管理]]