programing

Vuex getter가 상태 변경에 반응하지 않음

goodcopy 2022. 7. 3. 23:10
반응형

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

반응형