[Vue.js] Vuex(v4.x)

Vuex란?

복잡한 애플리케이션에서 컴포넌트의 수가 많이지면 컴포넌트 간의 데이터 전달이 어려워진다. Vuex는 Vue.js 애플리케이션을 위한 상태관리 패턴 + 라이러브러이다. 모든 커포넌트에 대한 중앙집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.

Vuex를 이용하지 않는다면 컴포넌트 간에 데이터를 주고받는 방법은 있지만, 대규모 프로젝트가 될수록 매우 복잡해진다. 데이터를 store에 저장하고, 프로젝트 전체에서 사용할 수 있도록 해주는 것이 Vuex이다.

Vuex 설치

터미널에서 다음 명령어를 통해 설치한다.

npm install vuex@next --save

시작하기

모든 Vuex 애플리케이션의 중심에는 store가 있다. 저장소는 애플리케이션의 상태를 저장하고 있는 컨테이너다.

Vuex 저장소가 일반 전역 개체와 두 가지 다른 점이 있다.

1. Vue store는 반응형이다. Vue 컴포넌트는 저장소의 상태(state)를 검색할 때 저장소의 상태에 정의된 변수 값의 변경 여부를 바로 알 수 있다.
2. 저장소의 상태는 직접 변경할 수 없다. 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이이다. 이렇게 하면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있다.

간단한 형태의 store를 만들어보자.

// D:\VueWorkspace\vue-project\src\store.js
import { createStore } from 'vuex'

const store = createStore({
    state (){
        return{
            count : 0
        }
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})
export default store;

vue 컴포넌트에서는 this.$store로 접근이 가능하다.

<template> 
    <p>Count : {{ count }}</p>
    <button type="button" @click="increment">Increment</button>
</template>
<script>
export default{ 
    computed: {
        count() {
            return this.$store.state.count;
        }
    },
    methods:{
        increment() {
            this.$store.commit('increment');
        }
    }
}
</script>

여기서 저장소의 state에 바로 접근해서 변경하는 것이 아니라, commit를 통해서만 변경을 할 수 있다.

그런데 여기까지만 했을 경우 store, state값이 연동이 안됨. ====> main.js에 store 등록해줘야됨. 망할 책

State

state는 프로젝트 전체에서 공통으로 사용할 변수를 정의하는 곳이다. state에 변수를 정의함으로써, 모든 컴포넌트에서 사용이 가능하다. state 관리를 통해 모든 컴포넌트에서 동일한 값을 사용할 수 있다.

state에 정의된 변수는 Vue 컴포넌트에서는 computed 속성을 이용해서 그 변경사항을 항상 추적할 수 있다.

    computed: {
        count() {
            return this.$store.state.count;
        }
    }

Getters

온라인 쇼핑몰을 생각해보면 장바구니에 상품을 담으면 항상 화면 상단의 장바구니 아이콘에 표기된다. 어떤 화면에서든지 제품을 장바구니에 추가하면 바로 장바구니 아이콘의 제품 수가 증가하는 것을 확인할 수 있다.

장바구니에 담긴 제품 데이터를 저장소의 state에 변수로 관리하고 있다면 장바구니에 담긴 제품 수, 특정 카테고리 제품 리스트 등을 getters를 정의하여 쉽게 가져올 수 있다.

const store = createStore({
    state () {
        return{
            count : 0,
            cart: [{
              product_id: 1,
              product_name: "아이폰 거치대",
              category: "A"
            }]
        }
    },
    getters: {
      cartCount: (state) => {
        return state.cart.length;
      }
    },

store.js에 위처럼 추가.

storeAccess에 아래처럼 추가하면 getters에 정의된 값에 접근할 수 있다.

    computed: {
        count() {
            return this.$store.state.count;
        },
        cartCount(){
          return this.$store.getters.cartCount;
        }
    },

Mutations

vuex는 state에 정의된 변수를 직접 변경하는 것은 허용하지 않는다. 반드시 mutations을 이용해서 변경해야 한다. 즉 mutation은 state를 변경시키는 역할을 한다. mutations은 비동기(Async) 처리가 아니라 동기 (Sync) 처리를 통해 state에 정의된 변수의 변경사항을 추적할 수 있게 해준다. 다음과 같이 mutations에 정의된 함수를 commit를 통해서 호출하는 것으로 저장소의 state에 정의된 변수의 값을 변경할 수 있다.

    methods:{
        increment() {
            this.$store.commit('increment');
        }
    }

Actions

actions은 mutations과 매우 유사한 역할을 한다. action을 통해 mutation에 정의된 함수를 실행시킬 수 있다. mutations이 있는데 왜 굳이 actions을 통해서 실행하는지? => actions에 정의된 함수 안에서는 여러 개의 mutations을 실행시킬 수 있으며 mutation과 달리 비동기 작업이 가능하다. 즉, actions에 등록된 함수는 비동기 처리 후 mutations을 커밋할 수 있어서 저장소에서 비동기 처리 로직을 관리할 수 있게 해준다.

`store.js`
    actions: {
      increment(context) {
        //비동기 처리 로직 수행 가능
        context.commit('increment')
      }
    }