programing

Vue로 Vuex를 변이시키는 것이 좋은 습관인가?또한 관찰할 수 있는 대상을 설정하다.

prostudy 2022. 5. 12. 21:59
반응형

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 })

참조URL: https://stackoverflow.com/questions/60420542/is-it-good-practice-to-mutate-vuex-with-vue-set-with-an-object-that-is-also-an-o

반응형