Vue2+Vuex通过数组动态生成store数据（分组模式）
在项目开发中，将数据集中存储在Vuex的store中，能便于数据的统一管理和维护。开发者可以在一个地方对数据进行操作和更新，以避免在组件中分散管理数据带来的混乱和复杂性。
对于状态数据较多情况下，界面操作数据又是数组结构，因业务需求，数组内每个元素都需要单独定义一个状态，那么每个单独定义即费时又费力；所以，我们可以利用数组，动态生成store中的state、getter、mutation和action等代码。
在Vue2+vuex中，通过数组动态生成store数据是一种灵活且高效的方式，但是在使用过程中需要注意数据结构的复杂性、性能问题以及调试难度等缺点，权衡利弊，合理地根据业务需求选择合适的数据管理方式。
该篇将在上一篇的基础上，实现更为复杂的功能需求。上一篇地址：Vue2+Vuex通过数组动态生成store数据（扁平模式）-CSDN博客
一、业务需求
如下图，左侧表格为管理系统中用户操作记录数据，右侧为控制表格列显示与隐藏的开关。当对应列名被勾选上，表格中则显示该列，否则隐藏该列信息。
对于这个需求，可以将表格中列定义为数组，通过 v-for 遍历 tableColumns 数组动态生成表格的列，根据 tableColumns 列数据中的 visible 属性过滤出当前需要显示的列。
在某些特定场景下，表格的列需要通过状态属性来判断是否显示或隐藏，则可以通过 v-if 或 v-show 来控制其列的显/隐。
图中所见，是完全可以在本组件内操控列的显/隐，为什么要大费周章通过vuex呢？此时我们把配置项移至全局设置弹框中，两者并全在同一组件内，这种场景则更为适合使用vuex。
此案例目的是为让程序员能够快速定义和处理批量状态数据，提升开发效率；所以，不纠结场景，旨在通过vuex来完成每列的显示与隐藏操作。
二、创建界面
首页创建页面中所需要的模拟数据，在src/data/目录中添加data.js，用于定义表格数据和列信息。代码如下：
export const firstData = [{"id": 1,"operator": "admin","departmentName": "研发部门","mainframe": "127.0.0.1","operationgLocation": "内网IP","operationgStatus": "成功","logNumber": 110,"operationType": "修改","systemModule": "用户管理","operationTime": "2025-03-02 23:17:56"},{"id": 2,"operator": "admin","departmentName": "研发部门","mainframe": "127.0.0.1","operationgLocation": "内网IP","operationgStatus": "成功","logNumber": 120,"operationType": "删除","systemModule": "用户管理","operationTime": "2025-03-03 22:30:29"},{"id": 3,"operator": "admin","departmentName": "研发部门","mainframe": "127.0.0.1","operationgLocation": "内网IP","operationgStatus": "成功","logNumber": 124,"operationType": "删除","systemModule": "用户管理","operationTime": "2025-03-04 19:51:54"},{"id": 4,"operator": "admin","departmentName": "研发部门","mainframe": "127.0.0.1","operationgLocation": "内网IP","operationgStatus": "成功","logNumber": 138,"operationType": "修改","systemModule": "角色管理","operationTime": "2025-03-05 20:10:09"},{"id": 5,"operator": "admin","departmentName": "研发部门","mainframe": "127.0.0.1","operationgLocation": "内网IP","operationgStatus": "成功","logNumber": 146,"operationType": "新增","systemModule": "用户管理","operationTime": "2025-03-06 19:51:45"}
]/*** 表格 列数据*/
export const firstTableColumns = [{ prop: "logNumber", name: "日志编号", visible: true },{ prop: "systemModule", name: "系统模块", visible: true },{ prop: "operationType", name: "操作类型", visible: true },{ prop: "operator", name: "操作人员", visible: true },{ prop: "departmentName", name: "部门名称", visible: true },{ prop: "mainframe", name: "主机", visible: true },{ prop: "operationgLocation", name: "操作地点", visible: true },{ prop: "operationgStatus", name: "操作状态", visible: true },{ prop: "operationTime", name: "操作时间", visible: true }
]/*** checkbox 控制选项*/
export const roleOptions = [{ id: 1, prop: "operation", name: "操作记录", data: firstTableColumns }
]
然后，在src/views目录下，创建store.vue模板文件，并添加到router路由配置中；配置好后，通过路由地址访问该页面。页面代码如下：
<template><div class="store-wrap"><el-row><el-col :span="15"><!-- first --><div class="list-box first"><div class="title"><h3>操作记录</h3></div><el-table :data="tableFirstData" style="width: 100%"><el-table-column prop="logNumber" label="日志编号" /><el-table-column prop="systemModule" label="系统模块" /><el-table-column prop="operationType" label="操作类型" /><el-table-column prop="operator" label="操作人员" /><el-table-column prop="departmentName" label="部门名称" /><el-table-column prop="mainframe" label="主机" /><el-table-column prop="operationgLocation" label="操作地点" /><el-table-column prop="operationgStatus" label="操作状态" /><el-table-column prop="operationTime" label="操作时间" width="150px"><template slot-scope="scope">{{ scope.row.operationTime }}</template></el-table-column></el-table></div><!-- /first --></el-col><el-col :span="1"> </el-col><el-col :span="8"><!-- role-wrap --><div class="role-wrap"><div class="title"><h3>-</h3></div><div class="role-list-box"><!-- list-item --><div class="list-item" v-for="(item, index) in roleList" :key="index"><div class="title"><h4>{{ item.name }}</h4></div><div class="content"><el-checkbox-group v-model="item.checkedList" v-if="Array.isArray(item.data)"><el-checkbox :label="sub.prop" v-for="(sub, i) in item.data" :key="