VUE vuex

2022-01-26

하나의 뷰 또는 복수의 화면 사이에서 여러개의 컴포넌트를 사용하면 각 컴포넌트 간에 값을 전달하거나 공유하는 것이 쉽지 않음.
이런 문제를 해결하기 위해서는 vuex라는 상태값 전문 라이브러리를 활용할 수 있다.

Vuex의 작동 원리

state : 공유하고 있는 상태값의 데이터 정의
mutations : setter의 의미와 유사. 외부에서 동기방식으로 저장할 때 사용
getters : state의 데이터값을 외부에서 읽어올 때 사용
actions : 외부 API 실행과 같은 비동기 실행을 관리할 때 사용

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vuex</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>
    <body>
        <!-- 버튼을 누를 때마다 1씩 증가하거나 감소하는 프로그램을 만들기 -->
        <div id="app">
            <h1>카운팅 프로그램 구성하기</h1>
            <com-counter msg="카운터1"></com-counter>
        </div>
        <!-- jQuery attr VS prop(우선적용) -->
        <script>
            // Vuex의 store 중앙에 state, mutations(setter 역할), getters, actions를 정의
            const store = new Vuex.Store({
                // count 값을 상태값으로 정의
                state : {
                    count : 0
                },
                // mutations는 getters와 대칭되는 setter의 역할을 설정
                mutations : {
                    //   count 상태값 증가시키는 함수
                    fnIncreaseData : function(state) {
                        return state.count++;
                    }
                },
                getters : {
                    // 상태값 반환
                    fnGetData(state) {
                        return state.count;
                    }
                },
                actions : {

                }
            });

            Vue.component("com-counter", {
                // 카운터 제목은 엘리먼트의 msg 속성값을 전달받아서 렌더링
                props : ['msg'], // 컴포넌트에서 전달받은 어트리뷰트 값을 말함. 문자열이나 객체의 배열 형식으로 구성
                template : `
                <div>
                    <h2>{{msg}}</h2>
                    <p>카운터: {{fnGetCount}}</p>
                    <button @click="fnIncCount">+1 증가</button>
                </div>
                `,
                computed : {
                    // 카운터 값은 store에서 getters에 접근하여 가져온 후 렌더링
                    fnGetCount() {
                        return store.getters.fnGetData
                    }
                },
                methods : {
                    // 카운터의 증가를 실행하고 store의 mutations에 직접 접근하여 실행
                    fnIncCount() {
                        store.commit("fnIncreaseData")
                    }
                }
            });
            // v-on:click 단축: @click
            
            new Vue({
                el: "#app",
                // store의 사용을 선언
                store
            })
        </script>
    </body>
</html>

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미