[Vue.js] 공식 가이드 문서 요약 (4) - 상태 관리

Vue 응용 프로그램에서 근본이 되는 것은 data 객체다. Vue 인스턴스는 단순히 그것에 대한 액세스를 프록시 한다. 따라서 여러 인스턴스에서 공유해야하는 상태가 있으면 id로 간단히 공유할 수 있다.

const sourceOfTruth = {}

const vmA = new Vue({
	data: sourceOfTruth
})

const vmB = new Vue({
	data: sourceOfTruth
})

이제 sourceOfTruth가 변형될때마다 vmA와 vmB가 자동으로 뷰를 갱신한다. 이 인스턴스들 각각의 하위 컴포넌트들은 this.$root.$data를 통해 접근할 수 있으며 언제든지 앱의 일부에서 변경할 수 있다.

이 문제를 해결하기 위해 간단한 store 패턴을 사용할 수 있다.

var store = {
	debug: true,
	state: {
		message: 'Hello!'
	},
	setMessageAction(newValue) {
		if (this.debug) console.log('setMessageAction triggered with ', newValue)
		this.state.message = newValue
	},
	clearMessageAction() {
		if (this.debug) console.log('clearMessageAction triggered')
		this.state.message = ''
	}
}

store의 상태를 변경시키는 모든 조치는 store 자체에 들어 있다. 이러한 유형의 중앙 집중식 상태관리는 어떤 유형의 에러가 발생할 수 있는지 등의 디버깅이 쉬워진다.

또한 각 인스턴스/컴포넌트는 여전히 자체적으로 비공개 상태를 가지고 관리할 수 있다.

var vmA = new Vue({
	data: {
		privateState: {},
		sharedState: store.state
	}
})

var vmB = new Vue({
	data: {
		privateState: {},
		sharedState: store.state
	}
})