MVVM 모델 View: DOM, Model: Javascript Object, VM: Vue (내부 리스너를 통해 model 변경, directives를 통해 변경사항이 view에 반영)
< script>
export default {
name: 'Navbar',
props: {
topbarColor: {
type: String,
default: '#2962ff'
},
title: {
type: String
},
logo: {
type: String
},
user: Object
},
data: () => ({
indexActive: 0,
showToggle: false,
searchvalue: ''
}),
methods: {
logout () {
if (confirm('정말 로그아웃 하시겠습니까?')) {
this.$store.dispatch('AUTH_LOGOUT').then(() => {
this.$router.replace('/login');
}).catch((e) => {
console.log(e);
});
}
}
}
}; </script> // 이런식으로 export 하면 vue instance 생성
data : vue 인스턴스 내의 속성이 전부 저장, 이 값이 변경되면 vue가 반응하여 업데이트
props : 부모 컴포넌트에서 데이터를 받을 수 있도록 하는 노출된 리스트
methods: directive에서 사용할 수 있도록 하는 메소드, 자동으로 this 바인딩 (this binding 문제 때문에 화살표 함수는 사용 지양)
watch: 해당 data 변화에 실행되는 함수. 처음 생성될때도 이를 호출함 (하지만 대체로는 computed 사용을 권장)
computed: 변화하는 data에 맞춰서 계산되는 속성, getter, setter가 존재. 계산되는 속성은 캐쉬되어 해당 computed가 사용하는 data가 변하지 않는 이상 바뀌지 않음.
캐싱이 되지 않게 하고 싶으면 method를 사용하자
추가적인 옵션, 데이터 참고 → https://kr.vuejs.org/v2/api/#옵션-데이터
vue instance에는 LifeCycle 존재
→ https://kr.vuejs.org/v2/guide/instance.html#라이프사이클-다이어그램
그리고 life Cycle에 대한 hook이 존재, 해당 hook에 원하는 동작 실현 가능.
{
name: 'MainContainer',
data: () => ({
title: '',
topbarColor: '',
user: {},
sidebarLinks: []
}), ...
created () {
this.$store.commit('GET_USER');
this.topbarColor = this.$store.state.themeColor;
this.user = this.$store.state.auth.user;
this.sidebarLinks = this.$store.state.auth.user.accessibleMenus;
}
}; // MainContainer 생성시 해당 created hook이 발동 , 테마 컬러와 auth 관련 부분 설정