Vue로 Vuex를 변이시키는 것이 좋은 습관인가?또한 관찰할 수 있는 대상을 설정하다.
달성 예상: 하나의 큰(batch) 쓰기 작업으로 Vuex 상태에 저장된 특정 레코드를 수정하는 가장 올바른 방법
컨텍스트:Vuex 상태에는 각 레코드의 기본값이 포함된 레코드 목록이 포함되어 있다.
Logic Component는 Getter를 초기화하여 레코드 중 하나를 얻는다.레코드에 새로운 속성을 추가하고 기존 값을 덮어쓸 필요가 있다.
질문 Vuex getter가 반환한 객체를 수정하고 나중에 전체 결과를 상태로 커밋하는 것이 허용될 수 있는가?그리고 만약 그렇다면, Vuex의 기존 기록을 덮어쓰는 것이 가장 좋은 방법이 될 것이다.
추신: 나는 또한 그것이 덮어쓰게 될 동일한 기록을 "획득"하고 있는 다른 요소들의 행동을 깨뜨리는 결과를 가져올 수 있는지, 그리고 이 주제에 대한 당신의 생각을 높이 평가할 수 있을지 의문이다:-)
Vuex 돌연변이를 통해서만 Vuex 데이터를 수정하지 않음
1) 먼저 getter record를 복제한다.레코드에 원시 속성, 즉 개체 또는 함수 속성이 있는 경우 딥 클론을 실행하십시오.여기 복제 옵션이 몇 가지 있는데, 많은 복제 기능이 제대로 작동하지 않는다는 점에 주목하십시오.
2) 클론 변이가 끝나면, Vuex 조치를 호출하고 그 조치를 돌연변이라고 부르도록 한다.행동에서 돌연변이만 부르는 것은 좋은 습관이다.
3) 그 돌연변이에,Vue.set
(또는)splice
상태 레코드를 대체한다.
4) 네, 게터(getter)를 직접 변이하면 다른 곳에서도 변이될 겁니다.
VueJS 반응도 가이드의 변경 감지 주의사항을 참조하십시오.
때로는 Object.assign() 또는 _.extend()를 사용하여 기존 객체에 여러 속성을 할당할 수도 있다.그러나 개체에 추가된 새 속성은 변경을 트리거하지 않는다.이러한 경우 원래 개체와 혼합 개체 모두의 속성을 사용하여 새 개체를 생성하십시오.
// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
'programing' 카테고리의 다른 글
v-for: 어레이 요소 및 속성 소멸 (0) | 2022.05.12 |
---|---|
첫 번째 통화 실패 시뮬레이션, 두 번째 통화 성공 (0) | 2022.05.12 |
힙에 대한 메모리 할당이 스택에 비해 훨씬 느린 이유는? (0) | 2022.05.12 |
Vuejs - 슬롯 사용 시 하위 구성 요소의 vnode를 렌더링하는 방법 (0) | 2022.05.12 |
결과에서 모든 게시물 특성 누락 (0) | 2022.05.12 |