vuex란?
무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
React의 Flux패턴에서 기인한다.
vuex가 오 ㅐ필요할까??
복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다,
이 때 컴포넌트 간 데이터 전달을 명시하고, 여러개의 컴포넌트에서 같은 데이터를 업데이트할 때 동기화 문제를 해결할 수 있다.
state : 컴포넌트 간에 공유하는 데이터이다. data() 이라고 생각하면 된다.
view : 데이터를 표시하는 화면 template와 같은 거라고 생각하자
action : 자용자의 입력에 따라 데이터를 변경하는 methods
view에서 클릭을 하면 action이 실행되고 action이 state를 변경한다.
vuex구조
컴포넌트 > 비동기 로직 > 동기 로직 > 상태
컴포넌트에서 액션을 실행하면 뮤테이션을 실행시키고 뮤테이션은 스테이트를 바꾸고 스테이트가 바뀌면 컴포넌트 렌더가 바뀌는 구조같다.
Vue.use(Vuex)
이건 플러그인을 사용하는 건데 use는 vue의 플러그인이라는 기능이다.이걸쓰는 이유는 뷰를 사용할 때 전역으로 뷰를 사용하는 모든 영역에 특정기능을 추가하고 싶을 때 ( 글로벌 functionality를 추가하고 싶을 때 사용 )
Vuex를 쓴다라고 했기 때문에 this.$store 이렇게 접근이 가능한 것이다.
Vuex기술요소
state : 여러 컴포넌트에 공유되는 데이터 data
getters : 연산된 state 값을 접근하는 속성 computed
mutations : state 값을 변경하는 이벤트 로직 , 메서드 methods
actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods
state란?
여러 컴포넌트 간에 공유할 데이터 - 상태
// vue
data : {
message : 'hello vue.js'
}
// vuex
state : {
message : 'hello vue.js'
}
//vue
<p>{{message}}</p>
//vuex
<p>{{this.$store.state.message}}</p>
getters란?
state값을 접근하는 속성이자 computed() 처럼 미리 연산된 값을 접근하는 속성
state {
num : 10
}
getters : {
getNumber(state) {
return state.num;
},
doubleNumber(state) {
return state.num * 2;
}
}
<p>{{this.$store.getters.getNumber}}</p>
<p>{{this.$store.getters.doubleNumber}}</p>getters는 state를 쉽게 접근하는 방법이다.