조작 가능한 편집이 Vuex 변환 오류를 트리거합니다.

조작 가능한 편집이 Vuex 변환 오류를 트리거합니다.

현재 Handsontable과 Vue를 사용하여 빅데이터 그리드를 만들고 있으며 데이터는 Vuex에 저장되어 있습니다.문제는 셀을 편집할 때 Vuex 변환 오류가 발생한다는 것입니다.ag-grid에서는 valueSetters와 getters를 사용하여 이를 회피할 수 있지만 Handsontable에서는 그 방법을 찾을 수 없습니다.또한 변환 오류로 인해 afterChange 이벤트가 실행되지 않습니다.계산된 값 get 및 설정도 도움이 되지 않습니다.같은 문제를 가진 사람이 있나요?커스텀 에디터는 쓸 수 있을 것 같습니다만, 가장 하고 싶지 않기 때문에 다른 해결책이 있을지도 모릅니다.

감사합니다.

옵션 1: vuex 저장소의 데이터 복사본을 Handsontable의 settings.data 속성에 제공해야 합니다.이렇게 하면 Handsontable이 데이터를 변경해도 vuex는 불평하지 않지만 모든 변경 내용이 스토어에 커밋되도록 해야 합니다.

예:

  get settings() {
    return {
      data: JSON.parse(JSON.stringify(this.data)),
    };
  }

옵션 2: 스토어에 변경을 커밋한 후 false를 반환하는 beforeChange 훅을 추가합니다.그러면 Handsontable에 의해 무시되는 모든 변경이 이루어집니다.이렇게 하면 Handsontable에 vuex 저장소에 커밋된 내용이 항상 표시됩니다.경고:또한 Handsontable은 셀이 편집된 직후에 저장소로 커밋될 때까지 이전 값을 표시합니다.

예:

  public beforeChange(changes, source) {
    if (source === "edit") {
      changes
        .map((change, i) => {
          const [index, attribute, oldValue, newValue] = change;
          const oldRow = this.settings.data[index];
          this.$store.dispatch("rowChange", { data: oldRow, index, attribute, oldValue, newValue });
        });
      // disregard all changes until they are propagated via vuex state commits
      return false;
    }
  }

(구체적인 코드 예시를 공유하면 상세하게 도움이 됩니다.)

데이터를 직접 변환하지 마십시오. 이는 안티 패턴이며 대부분의 경우 오류가 발생할 수 있습니다.

Vuex에서 돌연변이를 작성하고 업데이트할 페이로드 데이터로 돌연변이를 커밋합니다.돌연변이 내부의 모든 상태 업데이트 논리를 작성합니다.

비동기 소스에서 데이터를 가져온 경우 모든 변경에 대해 디스패치액션을 시도합니다.이 액션에서는 돌연변이를 커밋하고 나머지는 위와 같습니다.

도움이 됐으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/52329945/handsontable-edit-triggers-vuex-mutation-errors