Как эффективно управлять элементом массива с помощью Vuex?

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 редактирует состояние, используя мутация и здесь я вижу 2 проблемы:

• Чтобы зафиксировать мутацию дочернего элемента, мне нужно знать идентификатор группы (идентификатор дочернего элемента) в дочернем компоненте.
  Это вынуждает меня передавать идентификатор группы в качестве параметра дочернему компоненту, который увеличивает связывание компонентов.
• Также, когда я изменяю состояние, мне нужно сканировать два массива по идентификаторам (сначала найдите дочерний элемент)(группа), а затем найти дочерний элемент)

Я думаю, что я что-то упустил, и я мог бы изменить состояние более эффективным способом.
А также это, вероятно, не нужно для sub-детей знатьк какой группе он принадлежит.

У меня есть пара мыслей о том, что я мог бы сделать:

• Нужно ли превращать массивы в объекты после выборки из бэкэнда для более быстрого доступа кЯ бы?
• Нужно ли каким-либо образом регистрировать подмодуль для каждого элемента массива?

Я хотел бы, чтобы вы сообщили мне, что я делаю неправильно, и указали правильное направление для эффективногоиспользовать 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 может быть вызвана перед сохранением ваших данных, как показано в этом Codesandbox: https://codesandbox.io/s/vue-template-k6y51

Нормализуя вышеуказанный способ, это помогает:

• Сокращение времени на поиск определенного элемента с заданным идентификатором, с O (N) с Array.prototype.find до O (1).
• Лучшая логика для поиска родительского и дочернего элемента.
• Упрощение логики мутаций за счет дополнительной логики для удаления элементов и обновления отношений.
• Повышение производительности рендеринга Vue, поскольку сглаженные данные помогают избежать ненужного повторного рендеринга при обновлении данных в дочерних или родительских элементах.

Answer 2

То, что вы спрашиваете, это все о предпочтениях архитектуры.

Ваше решение может работать, и оно не ужасно.

Я не рекомендую вам применять ваши мысли, это принесет вам больше проблем и сложности, чем то, что у вас есть сейчас. Передача некоторых реквизитов и сканирование массива не так уж и дорого.

Тем не менее, решение для этой проблемы заключается в преобразовании всех дочерних компонентов в режиме без сохранения состояния.

Что это значит, довольно просто:

• Только ваши первые родители могут редактировать штат
• Вместо доступа к состоянию в ваших дочерних компонентах вы отправляете им непосредственно значение в виде реквизита
• Когда дочерний компонент редактирует поле, а не изменяет состояние напрямую, отправляет событие до первого родителя, поймать событие и отредактировать соответствующую часть (возможно с некоторым идентификатором или индекс, отправленный дочерними компонентами)

Вы можете попробовать этот способ, но это означает передачу всех ваших данных в ваши компоненты и потерю кэша vuex и улучшений ... Все это зависит от предпочтений кода.