编辑“︁Vuex目录结构”︁（章节）

= Vuex目录结构 =

== 介绍 ==
'''Vuex'''是Vue.js的官方状态管理库，用于管理大型单页应用中的共享状态。合理的目录结构能提高代码可维护性，尤其适合团队协作项目。本条目将详细介绍Vuex的标准目录结构及其最佳实践。

== 核心目录结构 ==
典型的Vuex目录包含以下模块（通常位于<code>src/store</code>目录）：

<syntaxhighlight lang="bash">
store/
├── index.js          # 主入口文件，组装模块并导出store
├── actions.js        # 根级别的action
├── mutations.js      # 根级别的mutation
├── getters.js        # 根级别的getter
└── modules/          # 模块化目录
    ├── user.js       # 用户模块
    ├── cart.js       # 购物车模块
    └── product.js    # 产品模块
</syntaxhighlight>

=== 文件作用说明 ===
* '''index.js'''：创建Vuex实例并整合所有模块
* '''actions/mutations/getters'''：全局状态操作方法
* '''modules'''：业务逻辑分模块存放

== 模块化结构详解 ==

=== 基础模块示例 ===
以<code>user.js</code>模块为例：

<syntaxhighlight lang="javascript">
// store/modules/user.js
export default {
  namespaced: true, // 启用命名空间
  state: () => ({
    profile: null,
    token: ''
  }),
  mutations: {
    SET_PROFILE(state, payload) {
      state.profile = payload
    }
  },
  actions: {
    async fetchUser({ commit }, userId) {
      const res = await api.getUser(userId)
      commit('SET_PROFILE', res.data)
    }
  },
  getters: {
    isLoggedIn: state => !!state.token
  }
}
</syntaxhighlight>

=== 主文件整合 ===
在<code>index.js</code>中组装模块：

<syntaxhighlight lang="javascript">
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
    // 其他模块...
  }
})
</syntaxhighlight>

== 状态关系图 ==
<mermaid>
graph TD
    A[Vue Components] -->|dispatch| B(Actions)
    B -->|commit| C(Mutations)
    C -->|mutate| D(State)
    D -->|render| A
    A -->|getters| D
</mermaid>

== 进阶结构模式 ==

=== TypeScript支持 ===
对于TypeScript项目，推荐类型化结构：

<syntaxhighlight lang="typescript">
// store/types.ts
export interface UserState {
  profile: UserProfile | null
  token: string
}

// store/modules/user.ts
const state: UserState = {
  profile: null,
  token: ''
}
</syntaxhighlight>

=== 大型项目结构 ===
超大型项目可采用功能垂直分割：

<syntaxhighlight lang="bash">
stores/               # 复数形式表示多store
├── auth/             # 认证功能域
│   ├── actions.ts
│   ├── mutations.ts
│   └── state.ts
└── dashboard/        # 仪表盘功能域
    ├── actions.ts
    └── state.ts
</syntaxhighlight>

== 最佳实践 ==
1. '''命名规范'''：
   * Mutation类型使用常量风格：<code>SET_USER_INFO</code>
   * Action名称使用动词：<code>fetchUserData</code>

2. '''模块设计原则'''：
   * 单个模块不超过300行代码
   * 相关功能聚合（高内聚）

3. '''目录结构选择依据'''：
   {| class="wikitable"
   ! 项目规模 !! 推荐结构
   |-
   | 小型项目（<5个模块） || 扁平化结构
   |-
   | 中型项目（5-15模块） || 基础模块化
   |-
   | 大型项目（>15模块） || 功能域划分
   |}

== 常见问题 ==
'''Q：是否需要为每个模块单独定义actions/mutations？'''
A：当模块逻辑复杂时建议拆分，简单模块可保持单文件结构。

'''Q：如何避免循环依赖？'''
A：遵循「单向数据流」原则：组件 → Action → Mutation → State → 组件

== 实际应用案例 ==
电商项目中的购物车状态管理：

<syntaxhighlight lang="javascript">
// store/modules/cart.js
export default {
  state: () => ({
    items: [],
    discount: 0
  }),
  mutations: {
    ADD_ITEM(state, product) {
      const existing = state.items.find(item => item.id === product.id)
      existing ? existing.quantity++ : state.items.push({ ...product, quantity: 1 })
    },
    APPLY_DISCOUNT(state, percent) {
      state.discount = Math.min(percent, 30) // 最大折扣30%
    }
  },
  getters: {
    totalPrice: (state) => {
      const subtotal = state.items.reduce((sum, item) => 
        sum + (item.price * item.quantity), 0)
      return subtotal * (1 - state.discount / 100)
    }
  }
}
</syntaxhighlight>

== 数学表达 ==
购物车折扣计算可用公式表示：
<math>
P_{total} = \left( \sum_{i=1}^{n} (p_i \times q_i) \right) \times \left(1 - \frac{d}{100}\right)
</math>
其中：
* <math>p_i</math> = 商品单价
* <math>q_i</math> = 商品数量
* <math>d</math> = 折扣百分比

== 总结 ==
合理的Vuex目录结构应：
* 反映业务领域模型
* 保持适度的模块化粒度
* 支持类型系统（如使用TypeScript）
* 便于状态的可追溯性调试

通过本文介绍的标准结构和变体方案，开发者可以根据项目规模选择最适合的Vuex组织方式。

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