!! 나중에 필요하면 더 정리할 내용 !!
- 응용 getters에서 getters호출, actions에서 actions호출 (quick vue 366p 참고)
- vuex helper 속성 등록 방법 객체 전개 연산자 등록, 명칭 바꿔서 등록
(명칭 : https://rnwns2.tistory.com/37?category=391381)
(객체 전개 연산자 등록 : https://vuex.vuejs.org/kr/guide/state.html)
- 모듈화, 여러 저장소
- vuex
- 단방향 데이터 흐름
- vue.js의 상태관리를 위한 라이브러리
- 공용으로 필요한 데이터를 중앙 저장소에서 관리하여 필요한 곳에 쉽게 전달할 수 있는 역할
store 등록
- main.js와 index.js에서 아래 코드를 작성하면 모든 컴포넌트에서 저장소(Store)객체를 this.$store로 접근 가능
// src/main.js
import store from './store';
new Vue({
store,
... 생략
})
// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
State : 상태
- 컴포넌트 간에 공유할 데이터
// state 형식
state: {
num : 10,
currentRegion : "all",
},
Mutation : 변이
- 변이(Mutation)의 목적은 상태(State)의 변경
- 상태의 변경과 관련이 없는 작업은 변이 내부에서 실행 하지 않도록 하기
- 변이(Mutation)는 동기적인 작업
1. 비동기 처리 가능하지만 사후 스냅샷 캡쳐 후 상태가 변경 되기때문에 어떻게 변경되었는지 추적하기 힘듬
// mutations 형식
// state.속성 => 기존의 데이터 값
// payload.속성 => 변경할 데이터 값
mutations: {
[Constant.CHANGE_REGION] : (state, payload) => {
state.currentRegion = payload.region;
},
},
Action : 액션
- 비동기
- dispatch()
// mutations 형식
// state.속성 => 기존의 데이터 값
// payload.속성 => 변경할 데이터 값
actions: {
[Constant.DELETE_REGION] : ({state, commit}, payload) => {
store.commit(Constant.DELETE_REGION, payload);
}
}
Getter : 게터
- 특정 컴포넌트에 사용되는 똑같은 값을 중복해서 계산하지 않고 재사용하고 싶을때 쓰임(중복 코드를 막아줌)
ex) 한 페이지에 글을 최대 10개 보여주는 계산식을 모든 게시판에 적용
- computed처럼 함수 형식으로 작성 해야한다.
1. 함수 인자에 state를 받아와야 한다
// getters 형식
getters: {
if(state.currentRegion == "all") {
return state.countries;
} else {
return state.countries.filter(c => c.region == state.currentRegion)
}
},
변이 vs 액션
| 변이(Mutation) | 액션(Action) | |
| 인자 | 상태(state), 페이로드(payload) | 저장소(store)객체, 페이로드(payload) - 상태(state) - 변이(mutation) - 게터(getter) - 액션(acttion) - commit |
| 기능 | - 저장소(store)의 상태(state)를 변경 - 동기 |
- 여러 변이(mutation)를 commit()할 수 있다. - 다른 액션을 dispatch()할 수 있다. - 비동기 |
'라이브러리' 카테고리의 다른 글
| Vuex(응용예제) (0) | 2020.04.27 |
|---|---|
| Vuex(기본예제) (0) | 2020.04.27 |
| vue-chartjs (0) | 2020.04.10 |
