마카로닉스

2030 No

vue3 상탯값 관리와 Vuex

2023-02-13 19:31:36 By 라이트 0 266 댓글수 4 포스트 하기

5월 2024
일	월	화	수	목	금	토
			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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Vuex를 사용하기 위해 CDN 연결 -->
    <script src="https://unpkg.com/vuex"></script>
</head>

<body>
    <div id="app">
        <h1>안녕하세요!</h1>
        <!-- 카운터 신규 엘리먼트 2개 사용. msg 속성에 이름만 다르게 적용 -->
        <com-counter msg="카운터1"></com-counter>
        <com-counter msg="카운터2"></com-counter>
    </div>
</body>

<script>
    // Vuex의 store 중앙에 state, mutations(setters), getters, actions을 정의함
    const store = new Vuex.Store({
        // count 값을 상태값으로 정의
        state: {
            count: 0
        },
        // mutations는 getters의 대칭되는 setters의 역할을 설정
        mutations: {
            // 일반적인 함수 형식으로 count 상태값을 증가 시키도록 정의
            fnIncData: function (state) {
                return state.count++
            },
            // 함수를 간단하게 1줄로 압축하여 => 연산자를 활용해 count 상태값을 감소 시키도록 정의
            fnDecData: state => state.count--
        },
        getters: {
            // 상태값을 반환함
            fnGetData(state) {
                return state.count;
            },
        },
        actions: {
            // 상태값을 감소시키는 함수는 서버단에서 실행한다는 가정을 해봄. 따라서 비동기 실행으로 정의하기 위해 async를 사용하고 매개변수로 commit 객체 전달
            async fnDecData({
                commit
            }, state) {
                // 가상으로 만든 원격 API 실행
                const result = await api.fnDecrement();
                // 원격 API가 성공할 경우에 비로소 fnDecData 함수 실행
                if (result == true) commit('fnDecData')
            }
        }
    })

    // 타이머를 사용해 1초 후 True 값을 반환하도록 가상으로 원격 서버 API 정의
    const api = {
        fnDecrement() {
            // 비동기 계산을 수행하기 위해 Promise를 사용하고 그에 따른 성공 값을 반환하기 위해 resolve 함수 실행
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(true);
                }, 1000); // 원격서버 느낌을 내기 위해 1초 딜레이 시킴
            });
        },
    };

    // com-counter라는 신규 엘리먼트 등록
    const comCounter ={
        // 카운터 제목은 엘리먼트의 msg 속성값을 받아서 렌더링 함
        props: ['msg'],
        template: `
            <div>
                <h2>{{ msg }}</h2>
                <p>카운터: {{ fnGetCount }}</p>
                <button @click="fnIncCount">+1 증가</button>
                <button @click="fnDecCount">-1 감소(원격 API 실행)</button>
                <hr>
            </div>`,
        computed: {
            // 카운터 값은 store에서 getters에 접근하여 값을 가져온 후 렌더링함
            fnGetCount() {
                return store.getters.fnGetData;
            }
        },
        methods: {
            // 카운터 증가는 동기실행을 가정하고 직접 store의 mutations에 접근하여 실행
            fnIncCount() {
                store.commit('fnIncData')
            },
            //카운터 감소는 원격 서버 API로 비동기 실행을 가정하고 actions에 접근하여 실행
            fnDecCount() {
                store.dispatch('fnDecData')
            }
        }
    }

    // var app = new Vue({
    //     el: '#app',
    //     // store 사용을 선언함
    //     store
    // });

    const {createApp} =Vue;
    createApp({
        data(){
            return{

            }
        },
        components:{
            "com-counter" :comCounter
        },

        store
    }).mount("#app");
</script>

</html>

컴포넌스와 Veux 의 관계 속에서 mutations 을 알기 쉽게 setters 라 이름을 짓지 않고 왜 ? mutations 이라 이름을 지었는가?

mutations 는 사전적 의미로 종의 변화를 뜻합니다. Vuex 의 최초 설계자가 컴포넌트를 살아 있는 생물체로 빗대어 생각했다면 mutations 을 이해하기가 한결 쉬울 것이다.

예를 들어 Vuex 의 데이터를 바꾸면 그것으로 끝나는 게 아니라, Vuex 를 연결하여 사용하는 모든 컴포넌트의 상태가 바뀌는 과정이 마치 돌연변이가 퍼져 나가는 모습과

흡사하다 해서 이런 이름이 붙었습니다.

출처: 프로그레시브 웹앱만들기