Vuex를 사용하여 어레이 요소를 효과적으로 관리하는 방법

Vuex를 사용하여 어레이 요소를 효과적으로 관리하는 방법

새로운 프로젝트에 Vuex를 사용하기 시작했는데 정말 마음에 들어요.하지만 어레이 요소의 상태를 효율적으로 관리하려면 어떻게 해야 합니까?

예를 들어 보겠습니다.
페이지를 열면 다음 응답이 백엔드에서 로드된다고 가정합니다.

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

엔티티에는 하위 엔티티의 배열이 있습니다.각 하위 요소에는 하위 하위 요소가 있습니다.

각 레벨을 표시하는 전용 컴포넌트가 있다고 가정합니다.상위 엔티티, 모든 자식(그룹) 및 하위 자식 요소입니다.
컴포넌트에는 , 이 체크박스는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★enabledsyslog.syslog.syslog.

Vuex를 사용하면 상태를 직접 변경하지 않아야 합니다.
따라서 체크박스를 누르면 Vue가 변환을 사용하여 상태를 편집하고 다음 두 가지 문제가 나타납니다.

• 서브자녀 요소의 변환을 커밋하려면 서브자녀 구성요소의 그룹 ID(자녀 요소 ID)를 알아야 합니다.
  하위 구성 요소에 그룹 ID를 매개 변수로 전달하여 구성 요소의 결합을 증가시킵니다.
• 또한 상태를 변환하는 경우 ID별로 2개의 어레이를 스캔해야 합니다(먼저 하위(그룹)를 찾은 후 하위 요소를 찾습니다).

뭔가 빠진 것 같아서 상태를 좀 더 효율적으로 수정할 수 있을 것 같아요.
또한 하위 자녀가 자신이 어느 그룹에 속하는지 알 필요가 없을 수도 있습니다.

제가 할 수 있는 일에 대해 몇 가지 생각이 있습니다.

• 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데이터를 저장하기 전에 전화할 수 있습니다.이 코드 앤 박스에 기재되어 있습니다.https://codesandbox.io/s/vue-template-k6y51

위의 방법으로 정규화함으로써 다음과 같은 이점을 얻을 수 있습니다.

• ID가 O(N)인 O(N)에서 ID가 합니다.Array.prototype.findO(1)면 되다.
• 부모 항목과 자녀 항목을 검색하는 데 더 적합한 논리입니다.
• 항목 삭제 및 관계 업데이트를 위해 더 많은 로직을 희생하면서 변환 로직을 단순화합니다.
• 평탄한 데이터는 하위 또는 상위 데이터가 업데이트될 때 불필요한 재렌더를 방지하는 데 도움이 되므로 Vue 렌더링 성능이 향상됩니다.

이것에 대해 질문하고 있는 것은, 모두 아키텍처의 선호도에 관한 것입니다.

솔루션은 기능할 수 있고, 나쁘지 않습니다.

당신의 생각을 적용하는 것은 추천하지 않습니다.그것은 당신이 지금 가지고 있는 것보다 더 많은 문제와 복잡성을 가져올 것입니다.소품을 건네고 어레이를 스캔하는 것은 그다지 비싸지 않습니다.

단, 이 문제에 대한 해결책은 모든 자 컴포넌트를 스테이트리스 모드로 변환하는 것입니다.

그 의미는 매우 간단합니다.

• 상태를 편집할 수 있는 것은 첫 번째 부모뿐입니다.
• 자녀 컴포넌트의 상태에 대한 액세스 대신 소품으로 직접 값을 보냅니다.
• 하위 구성 요소가 필드를 편집하는 경우 상태를 직접 변환하는 대신 이벤트를 포착하고 해당 부분을 편집하는 첫 번째 부모까지 올라가는 이벤트를 보냅니다(자녀 구성 요소에서 보내는 ID 또는 인덱스가 있을 수 있음).

이 방법을 사용해 볼 수 있지만, 이는 구성 요소의 모든 데이터를 전달하고 vuex 캐시 및 개선 사항을 손실하는 것을 의미합니다.모두 코드 선호도의 문제입니다.

언급URL : https://stackoverflow.com/questions/56020833/how-to-effectively-manage-array-element-using-vuex