컨텐츠 내 위젯


Vuex Vue

Vuex는 flux의 영향을 받은 데이터 관리 라이브러리이다. 크게 4가지로 이루어져 있으며 'State' 'Action' 'Mutations', 'Getter' 기본적인 사용방법 및 위의 4가지가 무얼 의미하는지 알아보도록 하자.

1. 기본 사용법.
Vue의 메인 인스턴스에 등록하여 사용하여야 한다. 등록법은 밑의 예제와 같다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from "vue";
import Vuex from "vuex";
import App from "./main.vue";
import "es6-promise/auto";

Vue.use(Vuex);// Store 등록
import { storeIn } from "./store.js";
export const store = new Vuex.Store({ ...storeIn });

new Vue({
el: "#app",
store, // Store 등록
// main.vue 에서 만든 내용을 render 함수에서 덧씌워서 쓰겠단 의미
render: h => h(App)
});



2. Store 기본 구성
'State' 'Action' 'Mutations', 'Getter'가 존재한다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export const storeIn = {
state: { // 반응 가능한 데이터의 저장소
point: 0
},
getters: {
// 게터
// 첫번째 인자는 그냥 자기꺼 state
getPoint: function(state) {
return state.point+'개';
}
},
mutations: {
// 순차적 로직
// 첫번째 인자는 그냥 자기꺼 state
up(state, payload) {
state.point += 1;
},
down(state, payload) {
      state.point -= 1;
}
},
actions: {
// 비동기 로직 이렇게 하는 이유는 Promise 를 넣을 수 있기 때문
// 첫번째 인자는 그냥 자기꺼 state
}
};



3. 컴포넌트에서의 사용방법 
컴포넌트에서는 기본적으로 this.$store.... 을 통해 접근하는 방법도 제공하지만, 각종 헬퍼 함수를 통해서도 접근할수 있다. 하기 예시에 모든 경우를 적어 두었다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
name: "CounterComponent", // 컴포넌트 이름 정의 실제 사용시 케밥케이스로 템플릿 내에서 이용한다 <example-component>
computed: {
/* ...mapState({
getResult: state => state.point
})
다른방법1 this.$store.state.count
다른방법2 ...mapState(['point']) 다만 이때는 key이름도 point가 됨 */

...mapGetters({
getResult: "getPoint"
})
/*
다른방법1 this.$store.getters.getPoint
다른방법2 ...mapGetters(['getResult']) 다만 이때는 key이름도 point가 됨 */
},
methods: {
...mapMutations({
increment: "up",
decrement: "down"
// this.increment(data) 를 this.$store.commit('up',data) 처럼 사용하게 해주겠다
// this.decrement(data) 를 this.$store.commit('down',data) 처럼 사용하게 해주겠다
})
/*
다른방법1
increment(data) {
this.$store.commit('up',data)
},
decrement(data) {
this.$store.commit('down',data)
}*/
} ,
// 액션일 경우
methods: {
...mapActions({
increment: "up",
decrement: "down"
// this.increment(data) 를 this.$store.dispatch('up',data) 처럼 사용하게 해주겠다
// this.decrement(data) 를 this.$store.dispatch('down',data) 처럼 사용하게 해주겠다
})
}
};




4. 여러 스토어 사용하기 
각자의 state에 영향을 받지 않는 여러 스토어를 만들어 사용할 수 있다. 이를 모듈을 통해 사용할수 있다. 다만 주의할 점은 mutation 타입 또한 namespage가 공유되므로 하기 예시처럼 분리해서 적어두어야 한다.

 1
2
3
4
5
6
7
8
9
10
export const storeIn = {
modules: {
firstStore: first,
secondStore: second
},
state: {
point: 0
}
/* 생략 */
};

1
2
3
// 상수 mutation 타입
const FIRST = { up: "FIRST/UP"};
const SECOND = { up: "SECOND/UP"};



덧글

댓글 입력 영역