[Vue.js & Nuxt.js]Vuex란?

 

 

🚀 Vuex

    🔽  개요

Vuex(뷰엑스)란 Application 상태 관리(State Management)를 돕는 Library인 것이에요.

먼저 상태(State)란 Vue의 data 속성과 비슷한 것이에요.
여기서 상태 관리란 현대 FE(Front End) Framework에서 모두 사용하는 개발 Pattern을 의미하는 것이에요.
Vue.js에서는 Vuex라는 상태 관리 Pattern을 사용하는 것이에요. 상태 관리가 필요한 이유는 Component의 숫자가 많아졌을 때, Component 간 Data 전달이나, 관리가 어렵기 때문인 것이에요.
Data 전달을 더 명시적이고, 효율적으로 하기 위한 방법이 상태 관리랍니다.


Vuex란 Vue.js의 상태 관리 Pattern이자 Library인 것이에요. 아래는 Vuex의 개념을 단순하게 도식화한 그림인 것이에요.

출처 : https://joshua1988.github.io/vue-camp/vuex/concept.html#%E1%84%87%E1%85%B2%E1%84%8B%E1%85%A6%E1%86%A8%E1%84%89%E1%85%B3-%E1%84%89%E1%85%A9%E1%84%80%E1%85%A2

위에서 보이듯이 화면(View) -> 화면에서의 Event 발생(Actions) -> Data Change(State)의 Data가 단방향으로 흐른다는 것이 특징인 것이에요.

 

 

        📦 Vuex 기술 요소

Vuex의 주요 기술 요소는 아래와 같은 것이에요.

● state
● getters
● mutations
● actions
 

그렇다면 Vue data 속성과 '상태'는 어떤 차이가 있는 것일까요?

 

Component 간 Data 전달 관계도

위 그림은 `id`라는 Data를 `Loing` Form Component에서 `Main` Component로 전달하는 Component 간 관계도 인 것이에요. `Loing` Form Component를 포함 모든 Component에서 `id`라는 Data(상태 - State)를 서로 공유하고 있는 것이에요.

만약 `Loing` Form에서 입력 받은 `id`를 `Main` Component에 표시해야 한다면 `Loing` Form Component에서 `Main` Component로 Data 속성 `id`를 전달해야 할 것이에요. 그러면 `id`는 상위 Component인 `Loing` Component와 최상위 Component를 거쳐 다시 최상위의 하위 Component인 `Main` Component로 전달 될 것이에요. 이처럼 특정 Data를 여러 Component가 공유하고 있는 것을 `상태(State)`라고 하는 것이에요.

참고로 이 개념은 `React.js`에도 동일하게 존재하는 개념인 것이에요.

그렇다면 상태 관리가 필요한 이유는 무엇일까요?

Component가 너무 많은 문제점

앞에서 살펴 본 그림과 위 그림의 차이점은 `Loing` Form Component에서 `Main` Component로 Data를 전달 할 때, `Loing` Component와 최상위 Component 사이에 너무 많은 Component가 존재한다는 것이에요.

이렇게 되면 `props`로 Data를 전달한다고 할 때, `Loing` Form Component와 최상위 사이에 있는 모든 Component에 `props`를 설정해 줘야 할 것이에요. 이렇게 되면 Data 이름을 바꾸기라도 하게 된다면 엄청난 고생이 뒷 따를 것이에요.

이 때, `props`말고, `Event Bus`를 이용하면 어떻게 될까요? 상-하위 간 Data 전달 구조를 따르지 않고, 한 번에 `Loing` Form Component에서 `` Component로 Data를 보낼 수 있어 쉽게 Data를 전달할 수 있게 될 것이에요. 하.지.만 여기서 생시는 문제점은 단방향 Data 흐름이 아닌 셀 수 없이 많은 Data 흐름(Countless Ways Data Flow)이 발생 된다는 것이에요.Main

 

Data 흐름 규칙이 정해져 있지 않은 모습

바로 이렇게요!

앞의 구조처럼 몇 개 되지 않는 Component 간 Data 통신도 어디에서 와서 어디로 가는지 파악하기 어려운데, 개수가 많을 때의 Component를 가진 Application을 제작한다고 하면 엄청난 고통에 시달리게 될 것이에요.

이럴 때 필요한 게 바로 `상태 관리`인 것이에요. Application에서 사용하는 모든 Data를 중앙에서 관리하여 크기가 큰 Application의 Data 관리를 효율적으로 하는 것이 `상태 관리`의 목적인 것이에요.

 

 

 

 

        📦 Vuex 구조도

출처 : https://joshua1988.github.io/vue-camp/vuex/concept.html#%E1%84%87%E1%85%B2%E1%84%8B%E1%85%A6%E1%86%A8%E1%84%89%E1%85%B3-%E1%84%83%E1%85%B3%E1%86%BC%E1%84%85%E1%85%A9%E1%86%A8

 

Data의 흐름은 Actions -> Mutations -> State 순서로 흘러가는 것이에요.

 

 

 

    🔽  Vuex 설치하기

CDN

<script src="https://unpkg.com/vuex"></script>

 

 

NPM

npm install vuex --save

 

Yarn

yarn add vuex

Module System과 함께 사용하려면 `Vue.use()`를 통해 Vuex를 명시적으로 추가 해줘야 하는 것이에요.

 

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

Vue.use(Vuex);

export const store = new Vuex.Store({
	// .....
});

Vue Store 하나를 생성한 뒤 ES6 import/export 문법으로 main.js File에 객체(인스턴스)에 주입해 줘야 하는 것이에요.

 

// main.js
import Vue from 'vue';
import { store } from './store.js';

new Vue({
  store: store
});

 

 

yarn add vuex

주니하랑은 `yarn`을 이용해서 설치 해 준 것이에요.

 

 

 

 

반응형

 

 

 

 

🚀 Nuxt.js의 Vuex

    🔽  Vuex in Nuxt

        📦 개요

Nuxt.js에서 Vuex를 사용하려면 아래와 같이 Project Package의 Root Level에 store라는 Package를 생성하고, 그 밑에 ~~.js 파일을 생성합니다.

 

위와 같이 해 주면 Vuex Library가 Import 되면서 Vuex를 이용할 수 있어요.

 

💡 참고 사항
만약 Project Package에 store가 없다면 Vuex Library는 자동으로 비활성화된다.
여기서 비활성화란 Build File에 포함되지 않음을 의미.

 

 

        📦 Vuex 시작하기

Vuex는 Vue.js의 상태 관리 Library이자 Pattern을 의미합니다.
Nuxt.js에서 Vuex를 시작하기 위해서는 /store/index.js File을 만들고, 아래와 같은 내용을 입력해 줘야 합니다.

// store/index.js
export const state = () => ({
  user: {}
})

export const mutations = {
  setUser(state, user) {
    state.user = user;
  }
}

export const actions = {
  async fetchUser(context) {
    const response = await axios.get('users/1');
    context.commit('setUser', response.data);
  }
}

기존 Single Page Application과 다르게 위와 같이 기본 Code만 작성해 주면 Nuxt.js Library 내부적으로 Vuex Library Import와 Configuration 작업을 진행 해 주기 때문에 Vuex Library를 다룰 때 작성하던 아래 설정 Code가 필요하지 않는 것이에요.

// 아래 설정 코드는 Nuxt 라이브러리 내부적으로 생성하고 설정해 줌
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

new Vuex.Store({
  // ...
})

앞에서 안내한 /store/index.js File의 내용은 Vue Component 내부에서 기본에 Vuex를 접근하던 방식과 동일하게 접근할 수 있어요.

<template>
  <div>
    <p>{{ $store.state.user }}</p>
    <button @click="displayUser"></button>
  </div>
</template>

<script>
export default {
  methods: {
    displayUser() {
      const user = { name: '넉스트' };
      this.$store.commit('setUser', user);
    }
  }
}
</script>

        📦 Vuex Module

store Package 밑에 생성한 index.js는 Vuex의 모듈화 관점에서 Root Module이 된답니다. 만약 index.js를 생성하고, 다른 이름의 Java Script File을 생성하면 Vuex의 모듈이 되는 것이에요. products.js File로 공부를 해 볼게요.

// store/products.js
export const state = () => ({
  items: []
})

export const mutations = {
  addItems(state, item) {
    state.items.push(item);
  }
}

위 Code는 마치 Single Page Application의 아래 Code처럼 동작하게 되는 것이에요.

// Vue CLI로 생성한 프로젝트에서 Vuex를 사용하는 경우
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

new Vuex.Store({
  state: () => ({
    user: {}
  }),
  // ...
  modules: {
    products: {
      namespaced: true,
      state: () => ({
        items: []
      }),
      mutations: {
        addItems(state, item) {
          state.items.push(item);
        }
      }
    }
  }  
})