Javascript 如何使用Vuex有效管理阵列元素？

我开始在一个新项目中使用Vuex，我非常喜欢它。 但我仍然不明白的是，我应该如何有效地管理数组元素的状态

看看这个例子。
假设我打开页面并从后端加载以下响应：

{
  "reportName": "Parent name",
  "groups": [
    {
      "id": 1,
      "name": "child group name 1",
      "elements": [
        {
          "id": 1,
          "name": "sub-child el 1",
          "enabled": false
        },
        ...
      ]
    },
    ...
  ]
}

该实体具有子实体数组。每个子元素都有一个子元素

现在假设我有一个专用组件来显示每个级别：父实体、每个子（组）和子元素。
子组件中有一个复选框，该复选框绑定到

已启用

字段

使用Vuex，我不应该直接更改状态。
因此，当我按下复选框时，Vue会使用变异来编辑状态 这里我看到两个问题：

• 要提交子元素的突变，我需要知道子元素组件中的组id（子元素id）。
  它迫使我将组id作为参数传递给子组件，从而增加组件的耦合
• 另外，当我改变状态时，我需要通过ID扫描两个数组 （首先查找子元素（组），然后查找子元素）

我想我遗漏了一些东西，我可以更有效地修改状态。
而且，子孩子可能不需要知道自己属于哪个群体

对于我能做些什么，我有一些想法：

• 我是否需要在从后端获取后将数组转换为对象，以便通过id进行更快的访问
• 我是否需要为每个数组元素注册一个子模块

我希望你让我知道我做错了什么，并指出我的错误

---

有效使用Vuex管理阵列状态的正确方向

您所质疑的都是架构首选项

你的解决方案可以奏效，并不可怕

我不建议你运用你的想法，因为它会给你带来比现在更多的问题和复杂性。传递一些道具和扫描阵列并没有那么昂贵

然而，这种问题的解决方案是以无状态模式转换所有子组件

这意味着非常简单：

• 只有您的第一任父母才能编辑状态
• 您不需要访问子组件中的状态，而是直接将值作为道具发送给它们
• 当子组件在编辑字段时，不要直接改变状态，而是发送一个事件，直到第一个父组件 捕捉事件并编辑相关部分（可能有一些id 或子组件发送的索引）

---

您可以尝试这种方式，但这意味着在组件中传递所有数据，并丢失vuex缓存和改进。。。这完全是代码偏好的问题。

简化变异逻辑的一个解决方案是规范化响应数据。这是一个使用软件包实现以下目标的示例：

import { normalize, schema } from "normalizr";
const elementEntity = new schema.Entity('elements');
const groupEntity = new schema.Entity('groups', {
  elements: [elementEntity]
});
const reportEntity = new schema.Entity('reports', {
  groups: [groupEntity]
});
const normalizeFunc = (reportData) => normalize(reportData, reportEntity);

可以在保存数据之前调用函数

normalizeFunc

，如下代码沙盒所示：

通过规范化上述方式，它有助于：

• 减少搜索具有给定id的特定项目的时间，从使用

  数组的O（N）到使用
  原型。查找
  到O（1）

• 搜索父项和子项的逻辑更好
• 简化变异逻辑，但代价是为项目删除和关系更新提供更多逻辑
• 提高Vue渲染性能，因为如果更新子级或父级中的数据，展平的数据有助于避免不必要的重新渲染

---

您可能需要阅读以下内容：。数据规范化是维护类似数组的数据的好方法，不仅适用于Redux，而且适用于所有状态管理库。@blaz看起来我需要的是Normalizer。但是，如果我也可以访问后端代码，那么在后端端对JSON进行规范化是否更好？对我来说，与规范化数据相比，嵌套JSON更易于人类阅读，也更易于目视检查和调试。而且在前端添加一些模式文件和扁平化数据并不会花费太多——只需多花费几Kbbelieve@blaz请您写一个答案，建议对数据进行规范化并使用

normalizer

？这个问题没有答案，但你的评论是我问题的实际解决方案。谢谢。我补充道。