Vuex(상태관리)

- 초보개발자로써 잘못된 정보를 올릴 수 있으니 잘못된 점 바로잡아주시면 감사하겠습니다! -

 

- 참고문헌

https://joshua1988.github.io/web-development/vuejs/vuex-start/

Vuex 시작하기 1 - Vuex와 State

https://ux.stories.pe.kr/149

개발하면서 경험으로 알게 된 Vuex에서 Store활용 방법

 

Vuex 란?

Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리 입니다 . 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙을 사용하여 응용 프로그램의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 합니다.

 

 

 

상태 관리(State Management)

상태(state)

• 어떤 객체가 가진 데이터 (data)
  • 객체 간 데이터를 주고 받으며 application이 구현됨
  • 예를 들어, Vue에서는 컴포넌트(객체) 에 data가 상태라 할 수 있음
• 지역적(local) 또는 전역적(global) 상태를 적절히 구분해서 설계해야 함
  • 지역적으로 props와 emit으로 컴포넌트 내 데이터를 전달
  • 전역적으로 vuex 스토어에 저장하던지, 브라우저의 쿠키(Cookie) 또는 로컬 스토리지(localStorage)에 저장하여 데이터 공유 가능

 

 

상태 관리가 필요한 이유

상태 관리는 중대형 규모의 웹 애플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있습니다. 일반적으로 앱의 규모가 커지면서 생기는 문제점들은 다음과 같습니다.

1. 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐할 컴포넌트가 많아지거나
2. 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려운 것

이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리입니다.

 

 

State, Mutations, Actions, Getters의 특징

Vuex의 핵심구성은 State, Mutations, Actions, Getters로 구성되어 있습니다. 각각 기본적인 특징과 다른점을 먼저 알기 쉽게 정리해 보겠습니다.

State

• state는 쉽게 말하면 프로젝트에서 공통으로 사용할 변수를 정의 합니다.
• 프로젝트 내의 모든 곳에서 참조 및 사용이 가능합니다.
• state를 통해 각 컴포넌트에서 동일한 값을 사용할 수 있습니다.

const state = () => ({
  account: null, 
  isAdmin: null, 
  item: null
});

Mutations

• Mutations의 주요 목적은 state를 변경시키는 역활을 합니다. (Mutations을 통해서만 state를 변경해야 함)
• 비동기 처리가 아니라 동기처리를 합니다. 위의 함수가 실행되고 종료된 후 그 다음 아래의 함수가 실행됩니다.
• commit('함수명', '전달인자')으로 실행 시킬 수 있습니다.
• mutations 내에 함수 형태로 작성합니다.

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

Actions

• Actions의 주요 목적은 Mutations를 실행시키는 역활을 합니다. Mutations이 실행되면 state도 변경이 되겠지요.
• 동기 처리가 아니라 비동기처리를 합니다. 순서에 상관없이 먼저 종료된 함수의 피드백을 받아 후속 처리를 하게 됩니다.
• dispatch('함수명', '전달인자')으로 실행 시킬 수 있습니다. ex) dispatch('함수명', '전달인자', {root:true})
• actions 내에 함수 형태로 작성합니다.
• 비동기 처리이기 때문에 콜백함수로 주로 작성합니다.

일반 형태로 실행

dispatch('setAccount', account );

const actions = {
  setAccount({ commit, dispatch }, account) {
    commit('currentUser', account);
    dispatch('setIsAdmin', account.uid);
  }
}

Components에서 then()으로 콜백함수 실행

dispatch('setAccount', account ).then(() => {   });

const actions = {
  setAccount({ commit }, account) {

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('currentUser', account);
        resolve()
      }, 1000)
    })

  }
}

Getters

• 각 Components의 계산된 속성(computed)의 공통 사용 정의라고 보시면 됩니다.
• 여러 Components에서 동일한 computed가 사용 될 경우 Getters에 정의하여 공통으로 쉽게 사용할 수 있습니다.
• 하위 모듈의 getters를 불러오기 위해서는 특이하게 this.$store.getters["경로명/함수명"]; 을 사용해야 합니다.

const getters = {
  isAuthenticated(state) { // 현재 로그인 상태인지 확인 (true/false)
    return !!state.user;
  },

  getAccount(state) {      // 회원정보 불러오기
    return state.account;
  },
};

Vuex 의 전체 흐름