Vuex는 뷰의 상태 관리 패턴이자 라이브러리
화면(View) -> 이벤트 발생(Actions) -> 데이터 변경(State)
: 여러 컴포넌트 간 공유되는 데이터
: message라는 state 정의
new Vuex.Store({
state: {
message: 'Hello Vue.js'
}
})
<div>{{ this.$store.state.message }}</div>
: state 값이 변경됐을 때 변화의 차이를 자동으로 반영하여 값 계산,
computed 속성과 매칭
: state 값인 message의 문자열을 거꾸로 뒤집는 reverseMessage 속성 선언
new Vuex.Store({
state: {
message: 'Hello Vue.js'
},
getters: {
reverseMessage(state) {
return state.message.split('').reverse().join('');
}
}
})
<div>{{ this.$store.getters.reverseMessage }}</div>
: state 값을 변경하는 유일한 방법, state는 항상 mutation으로 변경,
methods 속성과 매칭
: reverseMessage()를 통해 state 값인 message 문자열을 뒤집는다.
new Vuex.Store({
state: {
message: 'Hello Vue.js'
},
mutations: {
reverseMessage(state) {
state.message = state.message.split('').reverse().join('');
}
}
})
: commit()을 이용해서 mutation 호출
new Vue({
methods: {
reverseMsg() {
this.$store.commit('reverseMessage');
}
}
})
여기서 getters와 mutation의 차이는 뭘까??
mutations만 전달인자를 받을 수 있다.
getters는 computed에 등록 했지만 mutations는 methods에 등록한다.
: mutation 중에서 비동기 처리 로직들을 정의하는 속성
: fetchMessage()는 HTTP 통신을 처리하기 때문에 비동기 로직, get으로 받은 response를 commit을 통해 뮤테이션의 인자로 보낸다.
new Vuex.Store({
state: {
message: ''
},
mutations: {
reverseMessage(state, data) {
state.message = data.split('').reverse().join('');
}
},
actions: {
fetchMessage(context) {
axios.get(url).then(function(response) {
context.commit('reverseMessage', response.message);
});
}
}
})
: dispatch()를 이용해 action 호출
new Vue({
methods: {
getMessage() {
this.$store.dispatch('fetchMessage');
}
}
})