변환을 방지하기 위해 vuex 상태에서 컬렉션을 복사하는 것이 표준입니까?

변환을 방지하기 위해 vuex 상태에서 컬렉션을 복사하는 것이 표준입니까?

vue 포럼을 조사해 보니 2년 이상 된 답변이 많이 있습니다만, 이에 대한 구체적인 답변을 얻는 데 어려움을 겪고 있습니다(예시를 단순화하고 있습니다).

1. 상태의 객체 배열이 있다(테이블의 행 데이터)
2. subComponents가 포함된 tableComponents는 데이터를 검색하여 컬렉션의 항목별로 행을 하나씩 만듭니다.
3. 요건은 테이블의 각 행에 입력을 추가해야 하며, 이 행은 rowData에 바인딩되어 있습니다.후우
4. table Component에는 rowData를 상태에서 가져와 이러한 개체를 새(변경된) 배열에 배치하고 tableComponent 템플릿에 전달하는 계산된 속성이 있습니다.
5. 그런 다음 rowData의 v-모델을 사용하여 입력을 추가합니다.후우
6. 이것은 동작합니다만, 최근, 변환 커밋 없이 컬렉션내의 rowData 항목의 foo 속성을 수정하고 있는 것을 알았습니다.

v-model을 삭제하고 @input을 사용하여 변경을 커밋하는 것은 괜찮지만 이 작업의 작동 방식에 대해 두 가지 질문이 있습니다.

"변경 확인" 버튼을 누를 때까지 이러한 변경을 차단하려면 _.tableComponent 계산 속성 또는 vuex getter에서 전체 수집을 복제하는 것이 표준/성능입니까?오버헤드가 많은 것 같은데 내가 너무 보수적인 것 같아?

v-model에서 RowData를 업데이트할 수 있습니다.foo는 각 행이 수정해야 할 RowData 항목을 알고 있다는 것을 의미합니다.지금 vuex 컬렉션의 단일 객체에 변경을 커밋하고 있습니다.vuex 변환은 오브젝트를 찾아서 변경하고 컬렉션 전체를 스토어에 다시 전개하는 것이 가장 좋은 방법일까요?

다른 대부분의 vue 질문들과 마찬가지로 여러 가지 방법으로 문제를 해결할 수 있지만, 가장 뛰어난 성능/최적의 패턴이 무엇인지 잘 모르겠습니다.도와주셔서 감사합니다!

여기에서 Simple codeSandbox 업데이트: https://codesandbox.io/embed/vuex-store-olrvk 작업 호출 없이 vuex 데이터를 업데이트하는 방법을 확인하십시오.

당신의 코드를 검토한 결과, Sandbox 샘플이 YES 당신의 스토어 상태 데이터를 발견했습니다.rowCollection돌연변이를 사용하지 않고 돌연변이를 일으키고 있는 것은v-model(양방향 바인딩) 메모리 내의 데이터 스팟을 검출하여 백그라운드에서 변환합니다.물론 이것은 Vue devs에 의해 허용되었습니다.어느 문서에서도 찾을 수 없었습니다(그리고 그 문서에서도 그들은 상태 돌연변이의 예를 보여주었습니다).v-model스토어 돌연변이를 사용했어요)

리리erningerning에 대해서what is the most performant/best pattern 깔끔한

무효 모델에 대한 사용자 변경을 버퍼링해야 하는 경우(커밋 작업용) 상세 복사가 필요합니다.어쩔 수 없어요.지극히 평범하다.

언급URL : https://stackoverflow.com/questions/57098165/is-it-standard-to-copy-collections-out-of-vuex-state-to-prevent-mutation