Vue에서 상태관리란? Vuex로 정리하기

공식 : https://vuex.vuejs.org/kr/

 

이번엔 Vue에서 상태관리를 어떻게 할 것인가에 대해 정리해본다.

공부의 순서는 이러했다.

 

내가 봤을때 vue를 처음부터 끝까지 작은 프로젝트를 해보면서.. 삽질도 해보면서..

정리가 잡힌거같다.

 

만약 뷰를 처음 공부하는 사람이 있다면 나는 이 순서대로 공부해보라고 말해주고 싶다.

꼬리물기처럼 하다보면 필요한 기능들이 보이고 그게 결국 도달하는 점을 말해주는 것 같다.

 

 

1. vue-cli를 통해 프로젝트 생성 후, 처음 한 페이지의 기본적인 레이아웃을 짰다.
   그러다보니 Vue에서 페이지 이동시 각 페이지에 맞게 불러오는 기능이 필요해졌다.
   그게 vue-router 이다.
2. 뷰-라우터 설치 후, 아무래도 SPA로 만들어진 사이트에서 SEO가 필요할 것으로 여겨졌다.
   그래서 pre-render를 도입했다.

3. 작업을 하다보니 props를 이용해 부모에서 자식으로 값을 내려주는 것은 가능하나,
   자식에서 부모로 값을 올리는건 어찌하지? 라는 과제에 직면했다.
   그러면서 Event Bus를 알게되었다.

4. 이벤트 버스가 좋긴했는데...
   하다보니 프로젝트가 커질수록 이벤트 버스에 값이 많이 실리고, 굳이? 라는 생각이 들때가 많았다.
   그리고 이걸 한곳에서 관리하고 싶은데... 라는 생각이 들었다.
   그렇게해서 도달한게 Vuex 이다.

 

 

자, 그럼 먼저 설치를 해야겠지?

 

 

 

설치

npm install vuex --save

// main.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

Vuex에는 총 4개의 큰 개념이 있다.
State, Mutations, Actions, Getters 이렇게 총 4개이다.

 

State

공통으로 사용할 변수의 정의를 뜻한다.
직접적으로 변경은 불가능하고, mutations을 통해서만 가능하다.
state가 변경되면 view가 업데이트된다.

this.$store.state.adminId
// adminId는 state에서 정의한 state를 뜻함

 

Mutations

state를 변경하는 유일한 방법이며 이벤트와 유사하다.
commit()에 의해서만 호출되며 mutations 내에 함수 형태로 작성해야 한다.
mutations 내 기본구조는 다음과 같다.

/**
*@params state : state를 쓴다는 것을 뜻함
*@params payload : 들어올 값 (이름 변경 가능)
**/
함수명(state, payload) {
    // 내용 
}

 

예시는 아래와 같다.

const mutations = {
    setCurrentAdmin(state, payload) { 
        state.adminId = adminId; 
        // state의 adminId변수에 넘겨 받은 adminId값을 입력함
    }
}

export default mutations;

// 컴포넌트내 mutations을 (불러와) 쓰는 방법

// 방법 1
this.$stroe.commit(함수명, 전달인자);

// 방법 2 (mapping을 통해 사용하는 방법)
import { mapMutations } from 'vuex';

methods: {
    ...mapMutations(['setCurrentAdmin']),
  testFunction() {
        this.setCurrentAdmin(this.data);
    },
}

 

Actions

mutations는 동기를 통한 변경이기 때문에 비동기 작업시 사용한다.

actions은 mutations에 대한 commit() 이 가능하고, mutations을 통해 state를 변경할 수 있다.

첫번째 인자는 context 인자로 받을 수 있고, 두번째 인자는 payload이다.

context는 대표적으로 state, commit, dispatch, rootstate와 같은 속성들이 있다.

// 컴포넌트에서 불러오는 방식
this.$store.dispatch(actions 함수명, payload)

 

예시는 아래와 같다.

mutations: {
    addUsers : (state, payload) => {
        state.allUsers.push(payload)
    }
},
actions: {
    // context, payload
  // context를 객체형태로 받은 방법이다. 
    addUsers : ({ commit }, payload) => { 
        commit('addUsers', payload); // addUsers 라는 mustations을 commit한다. 라는 뜻 
    }
}

// 컴포넌트
methods: {
    this.$store.dispatch('addUsers', userInfor);
}

 

맵핑시 방법은 아래와 같다.

import {mapActions} from 'vuex';

methods: {
    ...mapActions(['action함수명']),
}

 

Getters

컴포넌트의 computed 와 같다고 볼 수 있다.

족송성에 따라서 변경되고 재계산된다.

즉, state 변경에 따라 재계산되고 view에 반영된다.

다만 state는 원본 데이터로서 변경이 일어나지는 않는다.

getters는 대용량 처리시 퍼포먼스에 연관이 있어서 조심해야한다.

대용량 처리 성능 최적화 방법 : https://kdydesign.github.io/2019/04/10/vuejs-performance/

// getters.js
getUserCount : state => {
    return state.user.length;
}

// 정의한 gatters를 컴포넌트에서 부를때 
this.$store.getters.함수명

 

이를 컴포넌트에서 부를 때 getter mapping하여 더 간결하게 선언할 수 있다.

아래는 getters 의 맵핑 방법이다.

import { mapGetters } form 'vuex';

// 방법 1
computed : {
    ...mapGatters([getUserCount]);
}

// 방법 2
computed : {
    ...mapGatters({
        count: 'getUserCount'
        //... gatters name
    });
}

// templete
<p>사용자 수 : {{ getUserCount }}</p>

참고: https://uxgjs.tistory.com/149

 

 

Vuex 전체 흐름도

// 전체 흐름 예시
export default new Vuex.Store({
  state: {
    message: 'Hello'
  },
  mutations: {
    changeMessage (state, newMsg) {
      state.message = newMsg
    }

  },
  actions: {
    callMutation ({ state, commit }, { newMsg }) {
      commit('changeMessage', newMsg)
    }
  },
  getters: {
    getMsg (state) {
      return `${state.message} => Length : ${state.message.length}`
    }
  }
})