Vuex가 무엇일까
참고 사이트:
참고 사이트:
1. Vuex 시작하기
https://vuex.vuejs.org/kr/guide/ https://joshua1988.github.io/web-development/vuejs/vuex-start/ (캡틴판교)
2. Vuex가 무엇인가요
3. Vuex 개념부터 실무에서의 사용
https://kdydesign.github.io/2019/05/09/vuex-tutorial/
4. Vuex tutorial - 맨땅에 개발하기
5. Inflearn - Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
6. Vuex api get start
https://velog.io/@cateto/Vue.js-Vuex-api-1-Get-Started
⇒ Vuex로 api를 호출할거다
= Vuex를 이용해 vuex state에 api를 담아 화면에 표시하겠다는 의미
Vuex:
- Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
- 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할
- 예측 가능한 방식으로 상태를 변경할 수 있음
그러니까,
Vuex는 말 그대로 중앙 집중식 저장소
⇒ props와 event에 얽매이지 않아도 됨
⇒ 컴포넌트의 구조가 복잡한 경우에는 props와 event를 통한 데이터 전달보다는 Vuex를 통해 별도의 저장소에서 데이터를 관리하는 것이 올바름
Vuex 저장소가 일반 전역 개체의 다른 점 두가지:
Vuex 저장소가 일반 전역 개체와 두 가지 다른 점.
https://vuex.vuejs.org/kr/guide/
1. Vuex store는 반응형
Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트
2. 저장소의 상태를 직접 변경할 수 없음
저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이. 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있음
그런데,
상태 관리 패턴이 뭘까?
new Vue({
// state: 컴포넌트 간에 공유할 data
data () {
return {
count: 0
}
},
// view: 데이터가 표현될 template
template: `
<div>{{ count }}</div>
`,
// actions: 사용자의 입력에 따라 반응할 methods
methods: {
increment () {
this.count++
}
}
})단방향 데이터 흐름이라면
state-view-actions-state-view-...
state-view-action 구조를 더 알아보자
state
원본 소스의 역할
view와 직접적으로 연결되어 있는 model
state는 직접적으로 변경 불가
⇒ 대신 mutation을 통해 변경 가능
⇒ mutation을 통해 state가 변경되면 view update
mutations
state를 변경하는 유일한 방법
이벤트와 유사
mutation은 함수로 구현되며 첫 번째 인자는 state, 두 번째 인자는 payload
mutation은 일반적으로는 직접 호출을 할 수 없으며, commit을 통해서만 호출 가능
actions
mutation과 비슷하지만 mutation과는 달리 비동기 작업이 가능
mutation에 대한 commit이 가능하여 action에서도 mutation을 통해 state를 변경 가능
action에서는 첫 번째 인자를 context 인자로, 두 번째 인자를 payload로 받을 수 있다.
( context에는 state, commit, dispatch, rootstate와 같은 속성들을 포함)
commit을 통해 mutation을 호출
⇒ Action은 dispatch를 통해서 호출
context의 속성을 보면 dispatch가 있는 것으로 보아 action에서는 서로 다른 action을 호출할 수 있음을 알 수 있음
getters
Vue 컴포넌트에서 Computed
=계산된 속성인데 getter의 결과는 종속성에 따라 캐시 되고 일부 종속성이 변경된 경우에만 다시 재계산
⇒ 특정 state에 대해 어떠한 연산을 하고 그 결과를 View에 바인딩할 수 있으며,
⇒ state의 변경 여부에 따라 getter는 재계산이 되고 View 역시 업데이트를 일으킨다.
⇒ state는 원본 데이터로서 변경이 일어나지 않는다.
하지만,
다중의 컴포넌트가 공통 state를 공유함으로써 간단함이 무너질 때도 있음.
⇒ 공통 state를 추출해서 공유하자
⇒ 전역적으로 singleTon으로 관리하자
=⇒ 하나의 크으은 뷰로 만들자
=⇒ vuex의 기본 아이디어
vuex 응용프로그램의 중심은 store.
내 어플리케이션의 state를 붙잡고 있는 컨테이너임.
Vuex가 무엇인지 알았으니 이제 시작해보자