Written by 최태열
on February 01, 2021

Vuex

Vuex란?

Vue의 상태 관리 라이브러리다.

중앙에 데이터 저장소를 두고 애플리케이션 내의 모든 컴포넌트들이 해당 저장소를 이용한다. 즉, 부모 자식관계의 데이터 전송이나 eventBus를 통한 데이터 전송을 하지 않을 수 있다.

Vuex 설치

$npm install vuex --save

해당 프로젝트에 install 한다.

Vuex 사용

VuexStore.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex) //Vuex 사용을 위한 설정
export default new Vuex.Store({
    //데이터(상태, model) - 컴포넌트 간에 공유하는 데이터 선언
    state : {
        counter: 0,
        message: '공유하는 메세지값을 보유하게 되는 property'
    },
    mutations: {
        //현 상태값을 parameter로 받는 함수
        increment:(oldState) => {
            oldState.counter++;
        },

        decrement:(oldState) => {
            oldState.counter--;
        },

        //? set (두개의 parameter)
        // (state, payload)
        /* payload
            - 헤더값, 메티데이터를 제외한 실제 사용되는 데이터값만을 의미하는 용어
            - 페이로드는 사용에 있어서 전송되는 데이터를 뜻한다. 
            - 페이로드는 전송의 근본적인 목적이 되는 데이터의 일부분으로 그 데이터와 함께 전송되는 헤더와 메타데이터와 같은 데이터는 제외
        */
        set:(oldState, payload) => {
            //새로운 데이터로 기존 데이터 수정하는 로직
            //브라우저 통해서 입력되는 데이터값들은 문자열 따라서 숫자로 변환해서 대입
            console.log(payload);  // payload : newData
            oldState.counter = parseInt(payload.newData);
        },

        update:(oldState, payload) => {
            oldState.message = payload.newData;
        }
    }
});

1. 상태(state)

- 애플리케이션이 관리해야 할 중요한 공유 데이터

2. 변이(mutation)

- 상태를 변경하는 함수들을 보유

Counter.vue

<!-- Vuex.store를 사용하는 컴포넌트 -->

<template>
    <div id="app">
        <p>모든 component가 공유하는 숫자 : 8</p>
        값 입력 : <input type="text" v-model="newValue" @change="set({newData:newValue})"> <br>

        <button @click="increment">1씩 증가 +</button>
        <button @click="decrement">1씩 감소 -</button>
    </div>
</template>

<script>
import Constant from '../js/Constant.js'

export default {
    data(){
         return {newValue: 0};  
    },
    computed: {
        count(){
            return this.$store.state.counter;
        },
    },
    methods: {
        increment: function () {
            this.$store.commit("increment");
        },
        decrement: function (){
            this.$store.commit("decrement");
        },
        set(payload){
            this.$store.commit("set", payload);
        }
    },
}
</script>

this.$state 를 통해 Vuex 저장소에 접근할 수 있다.

특히, mutation 같은 경우는 commit 을 통해 함수를 불러오고, 입력 변수를 넣을 수 있다.

Discussion and feedback

← → Top