javascript - 如何使用 Vuex 有效管理数组元素？

Question

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

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

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

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

现在假设我有一个专门的组件来显示每个级别:父实体、每个子(组)和子子元素。
子组件中有一个复选框，它绑定(bind)到 enabled 字段。

使用 Vuex，我不应该直接改变状态。
所以当我按下复选框时，Vue 使用 mutation 编辑状态在这里我看到 2 个问题:

• 要提交子子元素的突变，我需要知道子子组件中的组 ID(子元素 ID)。
  它迫使我将组 ID 作为参数传递给子子组件，这增加了组件的耦合。
• 此外，当我改变状态时，我需要通过 id 扫描两个数组(先找子(组)再找子子元素)

我想我遗漏了一些东西，我可以以更有效的方式修改状态。
而且子子也可能没有必要知道自己属于哪个组。

我有一些关于我能做什么的想法:

• 从后端获取后，我是否需要将我的数组转换为对象以便通过 ID 更快地访问？
• 我是否需要以某种方式为每个数组元素注册一个子模块？

我希望你让我知道我做错了什么并指出我高效使用 Vuex 管理数组状态的正确方向

Answer 1

简化突变逻辑的一种解决方案是规范化响应数据。这是使用包 normalizr 的示例实现这一目标:

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 可以在保存数据之前调用，如代码沙盒所示:https://codesandbox.io/s/vue-template-k6y51

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

• 减少搜索具有给定 id 的特定项目的时间，从使用 Array.prototype.find 的 O(N) 到 O(1)。
• 搜索父项和子项的更好逻辑。
• 以项目删除和关系更新的更多逻辑为代价简化变异逻辑。
• 提高 Vue 渲染性能，因为扁平化数据有助于避免在子级或父级中的数据更新时不必要的重新渲染。