[TIL]0816-Vuex
Vuex란?
- 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
- React의 Flux패턴에서 기인함
- Vue.js중고급 개발자로 성장하기 위한 필수 관문이라고 한다.
Flux란?
- MVC패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 -Unidirectional data flow
- action : 화면에서 발생하는 이벤트 또는 사용자의 입력
- dispatcher : 데이터를 변경하는 방법, 메서드
- model : 화면에 표시할 데이터
- view : 사용자에게 비춰지는 화면
Flux패턴의 단방향 데이터 흐름
- 데이터의 흐름이 여러 갈래로 나뉘지 않고 단방향으로만 처리
Vuex가 왜 필요할까?
- 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다.
Vuex로 해결할 수 있는 문제
- MVC패턴에서 발생하는 구조적 오류
- 컴포넌트 간 데이터 전달 명시
- 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제
Vuex 컨셉
- State: 컴포넌트 간에 공유하는 데이터 data()
- View: 데이터를 표시하는 화면 template
- Action: 사용자의 입력에 따라 데이터를 변경하는 methods
Vuex 구조
- 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태
Vuex 설치 및 등록
은 공식문서를 통해서 Vuex 공식문서
Vuex 기술요소
- state : 여러 컴포넌트에 공유되는 데이터 data
- getters : 연산된 state 값을 접근하는 속성 computed
- muntations : state 값을 변경하는 이벤트 로직・메서드 methods
- actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods
state란?
- 여러 컴포넌트 간에 공유할 데이터-상태
// Vue
data: {
message: 'Hi Vue.js'
}
// Vuex
state: {
message: 'Hi Vue.js'
}
<!-- Vue -->
<p>{{ message }}</p>
<!-- Vuex -->
<p>{{ this.$store.state.message }}</p>
선언하는 방식은 동일하다. 템플릿에서 접근하는 방식은 전역 스크립트 태그를 등록해서 위와 같은 방식으로 접근이 가능하다.
getters란?
- state값을 접근하는 속성이자 computed() 처럼 미리 연산된 값을 접근하는 속성
// store.js
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>
mutations란?
- state의 값을 변경할 수 있는 유일한 방법이자 메서드
- 뮤테이션은 commit()으로 동작시킨다
// store.js
state: { num: 20 },
mutations: {
printNumbers(state){
return state.num
},
sumNumbers(state,anotherNum){
return state.num + anotherNum;
}
}
// App.vue
this.$store.commit('printNumbers'); // 20반환
this.$store.commit('sumNumbers',30); // 50반환
mutationsm의 commit()형식
- state를 변경하기 위해 mutations를 동작시킬 때 인자(payload)를 전달할 수 있다
// store.js
state: { storeNum: 20 },
mutations: {
modifyState(state, payload) {
console.log(payload.str); // 'passed from payload'
return state.storeNum += payload.num; // 50
}
}
// App.vue
this.$store.commit('modifyState', {
str: 'passed from payload',
num: 30
});
state는 왜 직접 변경하지 않고 mutations로 변경할까?
- 여러 개의 컴포넌트에서 아래와 같이 state값을 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적하기가 어렵다.
methodes: {
increaseCounter() { this.$store.state.counter++; }
}
- 특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어렵기 때문이다
- 따라서, 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화를 수행. 반응성, 디버깅 테스킹 혜택이있다.
느낀점
Vuex 어렵다.. 3번은 돌려보고 3번은 더 해봐야겠다.
해당 TIL은 인프런 Vue.js 중급 강좌를 보고 정리한 글입니다.
Author And Source
이 문제에 관하여([TIL]0816-Vuex), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sza0203/TIL0816-Vuex저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)