반응형

vuex 정리한 자료

https://joshua1988.github.io/web-development/vuejs/vuex-start/#%EB%93%A4%EC%96%B4%EA%B0%80%EB%A9%B0


정말 잘해뒀다 이 블로그 말고 위의 블로그를 찾아가자.


state : store의 저장소


mutation : store의 객체 상태 값을 변경하는데 사용되는 메서드. methods에 등록한다.


getters : 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex 의 데이터를 접근할 때 중복된 코드를 반복호출 하게 되는 것이다. 이러한 것을 처리해주는 옵션이고 computed에 등록한다




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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <div id="app1">
            vm computed count: {{ cnt }}<br>
            vm computed countAlias: {{ countAlias }} <br>
            vm computed another: {{ another }} <br>
            vm computed countPlusLocalState: {{ countPlusLocalState}}<br>
        </div>
        <script>
            
            const store = new Vuex.Store({
                state : {
                    count : 0,
                    b: 1
                },
                mutations: {
                    increment(state){
                        state.count++
                    }
                }
            });
 
            var vm = new Vue({
                el: '#app1',
                data:{
                    localCount: 2
                },
                store,
                computed: Vuex.mapState({
                    // state의 state.count를 반영
                    /*
                        cnt: function(state){
                            return state.count;
                        }
                    */
                    cnt: state=>state.count,
 
                    // state => state.count와 동일하다
                    countAlias: 'count',
                    another: 'b',
 
                    // 두 값을 더한 것을 출력
                    countPlusLocalState(state){
                        return state.count + this.localCount
                    }
                })
            });
 
        </script>
    </body>
</html>
 
cs



저장소 객체의 mapState 메서드를 통해 저장소 상태 값을 전파하는 과정이다.




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
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <div id="app">
        </div>
        <script>
            const store = new Vuex.Store({
                state:{
                    count: 0
                },
                
                mutations:{
                    increment(state) {
                        state.count++
                    }
                },
 
                actions: {
                    increment(context, increment_value){
                        console.log("액션 메서드 호출과 함께 전달된 값 :: " + increment_value)
                        context.commit('increment')
                    }
                }
            });
 
            var vm = new Vue({
                el:'#app',
                store: store,
                methods:{
                    ...Vuex.mapActions({add:'increment'})
                }
            })
        </script>
    </body>
</html>
cs



method에서 ...Vuex.mapActions를 이용하여 하위 store 저장소 객체의 action을 가져올 수 있다.


이때 딕셔너리를 이용하여 원하는 함수명(ex : add)로 할 수 있다.






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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <div id="app">
        </div>
        <script>
            function getData(){
                return new Promise((resolve, reject) =>{
                    setTimeout(function(){
                        console.log("2초뒤 gotData함수 호출");
                        resolve(); // promise에서 값을 제대로 수신했을 때 종료를 알리는 함수
                    }, 2000);
                });
            }
 
            function getOtherData(){
                return new Promise((resolve, reject) =>{
                    setTimeout(function(){
                        console.log("3초뒤 gotOtherData  호출");
                        resolve();
                    }, 3000);
                });
            }
 
            const store = new Vuex.Store({
                state:{
                    count : 0
                },
 
                mutations: {
                    gotData(state){
                        console.log("gotData 변이 호출");
                    },
                    gotOtherData(state){
                        console.log("gotOtherData 호출됨");
                    }
                },
 
                actions:{
                    async actionA({commit}){
                        commit('gotData', await getData())
                    },
 
                    async actionB({dispatch, commit}){
                        await dispatch('actionA') // actionA가 끝나기를 기다린다.
                        commit('gotOtherData', await getOtherData())
                    }
                }
            });
        </script>
    </body>
</html>
 
cs



async/await 키워드를 사용한 Vuex 액션 메서드 호출


콘솔창에서 store.dispatch('actionB')를 호출해보자.





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
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <div id="app"></div>
 
        <script>
            const store = new Vuex.Store({
                state:{
                    count : 1
                },
                mutations:{
                    increase(state){
                        state.count++
                    }
                }
            });
            
        </script>
    </body>
</html>
 
cs




변이(Mutation)


Mutation은 저장소 객체 안에서 객체에 있는 상태 값을 변경하는데 사용되는 메서드이다.


'변이 메서드'라고 하며 저장소 객체의 상태 값은 오직 변이 메서드로만 변경 가능하다.


store.commit('increment')를 호출해보자.




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
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <div id="app"></div>
 
        <script>
            const INCREASE = 'increase';
            const store = new Vuex.Store({
                state:{
                    count : 1
                },
                mutations:{
                    [INCREASE](state, payload){
                        state.count+=payload.count
                        console.log(state.count)
                    }
                }
            });
 
        </script>
    </body>
</html>
 
cs



페이로드를 전달하여 변이 메서드를 이용 할 수 있다. 이때 함수명을 매핑 할 수도 있다.





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
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <div id="app"></div>
 
        <script>
            const INCREASE = 'increase';
            const store = new Vuex.Store({
                state:{
                    count : 1
                },
                mutations:{
                    [INCREASE](state, payload){
                        state.count+=payload
                        console.log(state.count)
                    }
                }
            });
 
            var vm = new Vue({
                store : store,
                methods:{
                    ...Vuex.mapMutations({add1:INCREASE}),
                    ...Vuex.mapMutations({add2:INCREASE})
                }
            })
        </script>
    </body>
</html>
 
cs


mapMutation을 이용하여 변이 메서드를 Vue 인스턴스에 전파하는 방법


vm.increase(2) 혹은 vm.add1(2) 혹은 vm.add2(2) 이런식으로 모두 사용 가능


이때 increase는 변수 값 그대로 이름이 적용, add1이나 add2는 매핑된 것이다.





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
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <div id="app"></div>
 
        <script>
            const one_store = new Vuex.Store({
                state:{
                    todos: [
                        {id : 1, text: '논문 쓰기', done : true},
                        {id : 2, text: '책 쓰기', done : true},
                        {id : 3, text: '밥 먹기', done : false},
                    ]
                },
                getters:{
                    doneTodos: state => {
                        return state.todos.filter(todo => todo.done)
                    },
 
                    doneTodosCount: (states, getters) =>{
                        console.log(states);
                        return getters.doneTodos.length
                    }
                }
            })
        </script>
    </body>
</html>
 
cs


게터가 다른 게터를 받을 수 있다.

이때 받아낼 대 state, getters를 인자로 받는데 state는 게터를 가지고 있는 vuex 인스턴스이다.







반응형
저작자표시 비영리 변경금지

'Basic > VueJS' 카테고리의 다른 글

Vue에서 style 바인딩 예제  (0) 2018.08.24
[VueJS] CSS와 Vue를 이용한 연습 프로그래밍  (0) 2018.08.13
[VueJS] 사용자 이벤트  (0) 2018.08.09
[VueJS] 컴포넌트, Props, 상위 하위 컴포넌트  (0) 2018.08.07
[VueJS] 다양한 엘리먼트 및 엘리먼트 수식어 예제  (2) 2018.08.05

티스토리툴바