2021 03 11 - vuex 빨리보기

vuex.vuejs.org/kr/guide/state.html

 

Vuex 애플리케이션의 중심에는 store가 있다.

기본적으로 애플리케이션의 상태를 보유한다.

 

Vuex와 일반 전역 개체와 다른점

1) Vuex store는 반응형이다. (상태를 감시하고 변경되면 그에 따른 대응을 한다.)

2) 저장소의 상태를 "직접" 변경할 수 없다. (객체지향에서 class를 예로 들자면, class의 멤버변수의 값을 바로 접근해서 수정하는것을 차단한다는 말이다. person.age = 31; 처럼) 저장소의 상태를 변경하는 유일한 방법은 "명시적인 커밋을 이용한 변이"이다. 

 

간단한 예시

const store = new Vuex.store({
	state: {
    	count: 0
    },
    mutations: {
    	increment(state) {
        	state.count++
        }
    }
})

store.commit('increment')	// commit을 하게되면 mutation안의 메서드를 호출하고, state안에 변수의 값을 변경하게 된다.
// store.state.count++ 위와 같은 내용이지만, 직접 변경하는 대신 변이를 수행하는 이유는 명시적으로 추적을 하기 때문이다.
// 또한 모든 변이를 기록하고 상태 스냅샷을 저장하거나 시간 흐름에 따라 디버깅을 할 수 있다!

console.log(store.state.count)	// -> 1

 

Vue 컴포넌트에서 Vuex 사용하기!

computed 내에서 사용하기..

가장 간단한 방법!

const Counter = {
	temlate: `<div>{{ count }}</div>`,	//내용이 변경되면 자동으로 재 렌더링!
    computed: {
    	count () {
        	return store.state.count	// Vuex는 반응적이기때문에 computed에 변경내용을 알린다.
        }
    }
}

 

Vuex는 store 옵션(Vue.use(Vuex)에 의해 가능!) 으로 루트의 모든 하위 컴포넌트에 주입되고, this.$store로 사용할 수 있다. Counter 구현을 수정해야 한다.