当前位置：首页 > news >正文

Vue2+Vuex通过数组动态生成store数据（扁平模式）

news 来源：原创 2025/5/30 13:19:56

在项目开发中，将数据集中存储在Vuex的store中，能便于数据的统一管理和维护。开发者可以在一个地方对数据进行操作和更新，以避免在组件中分散管理数据带来的混乱和复杂性。

对于状态数据较多情况下，界面操作数据为数组结构，因某些业务需求，数组内每个元素都需要单独定义一个状态，那么每个单独定义即费时又费力；所以，我们可以利用数组，动态生成store中的state、getter、mutation和action等代码。

在Vue2+vuex中，通过数组动态生成store数据是一种灵活且高效的方式，但是在使用过程中需要注意数据结构的复杂性、性能问题以及调试难度等缺点，权衡利弊，合理地根据业务需求选择合适的数据管理方式。

一、业务需求

如下图，左侧表格为管理系统中用户操作记录数据，右侧为控制表格列显示与隐藏的开关。当对应列名被勾选上，表格中则显示该列，否则隐藏该列信息。

对于这个需求，可以将表格中列定义为数组，通过 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="操作人员" />