Question

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

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

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

该实体具有一系列子实体。每个子元素都有一个子子元素。

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

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

要提交子子元素的变异，我需要知道子子组件中的组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

通过标准化上述方式，它有助于：

减少从给Array.prototype.find的O（N）到O（1）来搜索具有给定id的特定项目的时间。
搜索父项和子项的逻辑更好。
简化变异逻辑，但要花费更多的逻辑来删除项目和更新关系。
改善了Vue渲染性能，因为在更新子级或父级中的数据时，拼合的数据有助于避免不必要的重新渲染。

Answer 2

您所质疑的全部与体系结构首选项有关。

您的解决方案可以工作，而且效果不佳。

我不建议您运用您的想法，它会给您带来比现在更多的问题和复杂性。传递一些道具并扫描数组并不昂贵。

尽管如此，解决此类问题的方法是以无状态模式转换所有子组件。

这很简单：

只有您的第一个父母可以编辑状态
您无需直接访问子组件中的状态，而是将其值作为props直接发送给他们
当子组件在编辑字段时，而不是直接改变状态，而是发送一个事件，直到第一个父组件赶上事件并编辑相关部分（可能有一些ID 或子组件发送的索引）

您可以尝试这种方式，但这意味着将所有数据传递到组件中，并丢失vuex缓存和改进...这全都是代码首选项的问题。

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

2 个答案: