---

前言

参考去年参与的大型ERP项目, 我主要负责财务模块的前端部分.
这个项目有几百个前端页面(具体多少没算过), 状态管理结构应该是具有参考价值的.

---

一、总体结构

项目标准中约定仅含有报表(或页面即报表)的页面能够使用Vuex. 使用时需要先创建该以该页面名称命名的目录, 目录下应当具备index.vue页面主体, report报表目录, 如果主页面需要组件那么还应当有components目录用于存放组件, 对于该页面中报表所需的组件, 需要在report内建立components目录存放.

对于页面的状态, 依据所处功能模块进行分类存放, 并在该模块目录同级设置入口文件引入并集中导出该模块状态.
模块之间依旧据此, 同一大模块下的小模块存放在一起, 同级设立入口文件, 将每个小模块的导出逐个导入集中后再次导出, 得到该大模块的状态.

当然, 在所有index.js入口文件同级, 可以描述对该模块的其他配置.
如果反映到视图, 大概是这样:

下面我会分层说明.

---

二、代码结构

1. 文件层

激活namespace后仅对应管理该页面状态的JavaScript文件.
其内部结构也就是Vuex代码的基本结构, 包括state, mutations, actions:
即上图EBEB201R.js及其并列文件的结构.

/**
 * @Description %$%&*((*
 * @Author ??
 * @Date 2022-09-20
 */

import { xxxSearch } from '@/api/xxx/xxxx'

const state = {
  reportId: 'xxxx',
  reportTitle: 'xxxxxx月度表（一）',
  dataTotal: 0,
  reportDataNoPag: [],
  reportDataPag: [],
  rawReportDataPag: [],
  reportTableData: [],
  columnTotal: []
}

const mutations = {
  SET_RAW_ROW (state, data) {},
  
  SET_TABLE_LOADING(state, data) {},
  
  SET_TABLE_DATE(state, data) {},
  
  SET_TABLE_EVENT (state, event) {},
  
  SET_SON_EVENT(state, data) {},
  
  SET_COLUMN_TOTAL(state, data) {}
}

const actions = {
  generateTableEvent ({ commit }, headerArr) {},

  async initTableData ({ commit, dispatch }, queryParams) {},

  updateTableData ({ commit, state }, pageIndex) {},

  initActions ({ commit, state }) {},

  resetData ({ commit }, params) {}
}

export default {
  namespaced: true,
  mutations,
  actions,
  state
}

另外为了防止混淆, mutations方法名统一使用大写.

然后所有的该模块下页面文件用modules目录包裹, 这些页面状态不应当与 对该功能模块的状态配置和入口文件 混杂在一起, 参考EBE_1/E_C_ZZZ/modules.

有关namespace:
store对象会因为过多的状态变得臃肿, 而namespace启用后, 允许store内的状态模块化, 一个单独的模块将拥有自己的state, mutation, actions, 相当于每个页面的状态独立但是集中的存储在了store里, 而非一体化的存储于store中, 在页面中以下方式调用:

import {mapActions, mapMutations, mapState} from 'vuex'

// computed
...mapState('模块名', [ // 模块名和导出时的名称有关
  'reportId',
  'beforeOutData',
  'reportTableData'
])

// methods
...mapMutations('模块名', [
  'SET_PRINT_FLAG',
  'SET_TABLE_DATE',
  'SET_TABLE_LOADING',
  'SET_EXCEL_OUT_FLAG',
  'SET_REPORT_PRINT_DATA'
]),
...mapActions('模块名', ['initTableData', 'initActions', 'resetData']),

this['SET_TABLE_DATE'](this.effcDate)

---

2. 一级功能模块

即文件直属的功能模块目录, 内部应当具备index.js入口文件来导出该模块下所有页面的状态, 和一些仅针对该模块的配置:

/**
 * @Description %&*^*(&^*%$%&
 * @Author ??
 * @Date 2022-09-20
 */

import EBEB201R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB201R'
import EBEB202R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB202R'
import EBEB203R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB203R'
import EBEB204R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB204R'
import EBEB205R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB205R'
import EBEB206R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB206R'
import EBEB207R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB207R'
import EBEB208R from '@/store/modules/report/EBE_1/E_C_ZZZ/modules/EBEB208R'

export const E_C_ZZZReportModule = {
  EBEB201R,
  EBEB202R,
  EBEB203R,
  EBEB204R,
  EBEB205R,
  EBEB206R,
  EBEB207R,
  EBEB208R
}

---

3. 二级功能模块

逻辑同二级功能模块, 逐个导入然后集中导出:

/**
* @author ??
* @date 2022-7-4
* @description index
*/

import { EBECCReportModules } from '@/store/modules/report/EBE_1/xxx'
import { EBECReportModule } from '@/store/modules/report/EBE_1/xxx'
import { EBEBReportModule } from '@/store/modules/report/EBE_1/xx'
import { EBEBBReportModule } from '@/store/modules/report/EBE_1/xx'
import { EBEWReportModule } from '@/store/modules/report/EBE_1/xxx'
import { EBEYReportModule } from '@/store/modules/report/EBE_1/xxxx'
import { E_C_ZZZReportModule } from '@/store/modules/report/EBE_1/E_C_ZZZ'

export const EBE1ReportModules = {
  ...EBECReportModule,
  ...EBEBReportModule,
  ...EBECCReportModules,
  ...EBEWReportModule,
  ...EBEYReportModule,
  ...EBEBBReportModule,
  ...E_C_ZZZReportModule
}

---

4. 总状态

得到最终传入Vuex类中, 去实例化挂载到Vue的状态:

将report内所有一级功能模块的导出在report/index.js再次集中后导出:

// report/index.js
/*
 * @author ??
 * @date 2022-7-4
 * @description index
 */

import { EBEReportModules } from '@/store/modules/report/EBE'
import { EBE_1ReportModule } from '@/store/modules/report/EBE_1'
import { EBFReportModule } from '@/store/modules/report/EBF'

export const ReportModules = {
  ...EBEReportModules,
  ...EBE_1ReportModule,
  ...EBFReportModule
}

然后随着其他诸如permission.js和user.js配置一起引入到上图的index.js, 进行Vuex实例的生成和挂载.

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import permission from './modules/permission'
import settings from './modules/settings'
import user from './modules/user'
import { reportModule } from '@/store/modules/report'

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    app,
    permission,
    settings,
    tagsView,
    user
  }
})

export default store

---

总结

好吧, 希望这能帮得上忙.