반응형
Vuex getter가 상태 변경에 반응하지 않음
Vuex 스토어에서 가공된 값을 가져와야 하는 코드가 있습니다.그래서 나는 처리된 값을 반환해야 하는 getter라고 썼다.코드는 다음과 같습니다.
mediaSettings: (state) => {
const timestamps = [];
const events = [];
state.media.forEach( medium => {
if( !medium.settings || !medium.settings.dates ) return;
medium.settings.dates.forEach( dateRange => {
if( !dateRange.date_from || !dateRange.date_to ) return;
const from = new Date( dateRange.date_from );
const to = new Date( dateRange.date_to );
while ( from <= to ) {
if( timestamps.includes(from.getTime()) ) {
from.setDate( from.getDate() + 1 );
continue;
}
events.push({
date: new Date( from.getTime() ), // Need Date clone via new Date().
mediumId: medium.id,
});
timestamps.push( from.getTime() );
from.setDate( from.getDate() + 1 );
};
});
});
return events;
}
값을 변경하는 변환은 다음과 같습니다.
SET_MEDIA_SETTINGS(state, payload) {
state.media.forEach( medium => {
if( medium.id === payload.media_id ) {
medium.settings = { timeMode: payload.mode, dates: payload.dates, times: payload.times };
}
});
},
문제는 State.media[]에서 Vuex가 반응하지 않는다는 것입니다.settings.settings[] 값이 변경되었습니다.state.media[]레벨로 변경이 이루어집니다.어떻게 하면 고칠 수 있죠?이 문제의 회피책은 무엇입니까?도와주셔서 감사합니다.
이에 대한 해결책은 Vue set() 메서드를 사용하여 변환 값을 변경하는 것이었습니다.코드는 다음과 같습니다.
SET_MEDIA_SETTINGS(state, payload) {
state.media.forEach( (medium, index) => {
if( medium.id === payload.media_id ) {
medium.settings = { timeMode: payload.mode, dates: payload.dates, times: payload.times };
this._vm.$set(state.media, index, {...medium});
}
});
},
언급URL : https://stackoverflow.com/questions/71660687/vuex-getter-does-not-react-on-state-change
반응형
'programing' 카테고리의 다른 글
| Java에서 1200~1.2k 포맷하는 방법 (0) | 2022.07.03 |
|---|---|
| Vue2 리플릿 맵이 BoostrapVue 모달에 올바르게 표시되지 않음 (0) | 2022.07.03 |
| Java 프로그램은 어떻게 자체 프로세스 ID를 얻을 수 있습니까? (0) | 2022.07.03 |
| Vuex: 브라우저 새로 고침 시 상태 일부 유지 (0) | 2022.07.03 |
| JUnit 4에서의 테스트 조건 무시 (0) | 2022.07.03 |