쨘.. 이런식으로 컴포넌트 state가 있는데, 각 state가 바뀔때마다, 이벤트버스로 데이터변경을 알리고싶을때,
메소드를 동적으로 만들때! vuex의 mapMutations처럼!!! 이럴때 유용합니다.
하나하나 event emit하고, 받는곳에서는 on으로 하나하나 다 받기 귀찮잖아요.
자바스크립트니까 동적으로 구현해봅시다.
먼저 state!
const SURVEY_INFO_STATE = {
surveyName: '',
startDate: '',
startTime: '',
endDate: '',
endTime: '',
surveyOrgan: '',
surveyDescription: '',
};
뷰 컴포넌트 data에 맵핑하고싶다면 ...SURVEY_INFO_STATE 이런식으로 스프레드 오퍼레이터를 쓰면됩니다.
이해가 잘 안 되실까봐 친절하게 아래 예제코드도 있어여!ㅎㅎ
data: vm => ({
...SURVEY_INFO_STATE,
}),
이제 동적으로 메소드를 만들어봅시다.
const surveyInfoMethods = {};
Object.keys(SURVEY_INFO_STATE).forEach(stateName => {
surveyInfoMethods[`handleChange${capitalizeFirstLetter(stateName)}`] = function (v) {
this[stateName] = v;
this.$eventBus.$emit(`change-${stateName}`, v);
};
});
위에서 생성한 메소드도 뷰 컴포넌트에 아래와 같이 맵핑하면 됩니다
methods: {
...surveyInfoMethods,
},
capitalizeFirstLetter가 뭔지 모르실까봐...아래 또 구현체를 드립니다.
export const capitalizeFirstLetter = (string = '') => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
이벤트는 아래와 같이 on으로 받을수있습니다.
Object.keys(SURVEY_INFO_STATE).forEach(stateName => {
this.$eventBus.$on(`change-${stateName}`, v => {
this[stateName] = v;
})
});
간단하쥬?
