Vuex

상태, 뷰, 액션

Vuex

Vuex가 무조건 도입하는게 좋을까?

참고

Vuex

Vuex는 Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리

상태, 뷰, 액션

new Vue({
	// 상태
	data () {
		return {
			count: 0
		}
	},

	// 뷰
	template: '<div>{{ count }}</div>',

	// 액션
	methods: {
		increment () {
			this.count ++
		}
	}
})
JavaScript
복사

•

상태: 앱을 작동하는 원본 소스 ( data )

•

뷰: 상태의 선언적 매핑 ( template )

•

액션: 사용자 행동에 반응해 상태를 변경 ( methods )

Vuex

Vue.js 는 인스턴스 생성 시 인자로 받는 data 객체를 이용해서 상태를 관리하며, data안의 내용이 변경되면 이를 인지하고 데이터를 사용하는 컴포넌트를 업데이트한다

개발을 하다보면 서로 다른 컴포넌트가 동일한 데이터를 사용하는 경우가 생기는데, 이를 해결하기 위해 props 를 통해 데이터를 전달하거나 이벤트를 통해 data 를 동기화 하는 방법이 있다

하지만 위의 방법으로 개발을 하게 되면 어플리케이션이 조금만 복잡해지면 관리하기가 매우 어려워지며, Vue.js 의 장점인 단숨함이 굉장히 빠르게 저하된다

Vuex 는 이러한 문제를 해결하기 위해 전역에서 접근 가능한 스토어 역활을 하고 있으며, 정해진 규칙에 맞춰 상태를 변경할 수 있다

Vuex는 Flux, Redux, The Elm Architecture 에서 영감을 얻어 개발되었다

Vuex

Vuex가 무조건 도입하는게 좋을까?

Vuex 는 여러 컴포넌트에서 공유된 데이터를 처리하는데 굉장히 유용하지만, 배우기 위해 러닝 코스트가 든다.

만약, 프로젝트가 단기간내에 끝내야되고 어플리케이션 규모가 작다면 Vuex 없이 EventBus 를 사용해서 구현하면 된다. 하지만 어플리케이션이 중규모 이상일 경우 Vuex 는 반드시 도입하는게 좋다

참고

•

http://vuex.vuejs.org/kr/intro.html