Vuex 상태 관리 라이브러리 설치 방법 사용법

Vuex란?

Vuex는 전역 상태(global state)를 관리하는 라이브러리입니다.

 

지역상태 vs 전역상태

상태는 Local State와 Global State가 있습니다.

지역 상태(local state)	전역 상태(global state)
하나의 컴포넌트에서 영향을 줌	전체 앱 또는 다수의 컴포넌트에 영향을 줌
ex) 입력 요소에 의해 사용자가 값을 입력, show / hide 를 결정하는 값	ex) 유저 권한 상태, 장바구니

Vuex는 하나의 컴포넌트가 아닌 여러 컴포넌트들 또는 전체 앱에서 사용하는 데이터들의 값을 관리하기 위해서 사용하는 라이브러리입니다.

 

Vuex는 언제 사용해야 할까?

Vue를 처음 사용하실 때는 Vuex에 대해서 이해하기가 쉽지 않습니다.

충분히 Vue를 사용하고 경험해보신 뒤에 Vuex를 공부하셔도 늦지 않습니다.

 

Vue에서는 props를 이용해서 데이터를 전달할 수 있고,

provide를 이용해서 하위 컴포넌트에 데이터를 전달할 수 있습니다.

간단한 컴포넌트를 구현할 때는 Vuex 라이브러리를 사용하는 것이 과할 수도 있습니다.

Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기

 

Vue provide inject 간편하게 데이터 전달하기

 

하지만, 전체 앱에서 사용하는 데이터나 여러 컴포넌트에서 사용하는 상태를 관리해야 할 때는

props만으로 상태를 관리하기가 쉽지 않습니다.

 

데이터가 어디서 변경되는지 추적하기 어렵고, 실수로 상태가 변경되는 경우도 있습니다.

혼자서 작업하는 경우가 아니라 팀으로 작업하는 경우에는 문제가 더 크게 발생할 수 있습니다.

 

Vuex 사용하면 장점

1. 컴포넌트 밖에서 상태를 관리를 관리합니다.

엄청나게 큰 컴포넌트를 만들지 않아도 됩니다.

 

2. Vuex는 상태 관리를 명확한 규칙에 따라서 진행하게 됩니다.

어디서 변경이 됐는지 쉽게 파악할 수 있고 오류의 확률도 줄어듭니다.

props와 $emit 지옥에서 벗어날 수 있습니다.

 

Vux 설치 방법

Vue 프로젝트에서 Vuex 라이브러리를 추가로 설치합니다.

npm install vuex --save

Vuex 사용방법

main.js

import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue';

const store = createStore({
  state() {
    return {
      counter: 0,
    };
  }
});

const app = createApp(App);

app.use(store);
app.mount('#app');

Vuex 라이브러리에서 createStore 메서드를 import 합니다.

createStore 함수를 통해서 저장소를 생성하고, 

app.use(store)를 통해서 저장소를 app과 연결합니다.

 

app.vue

<template>
  <base-container title="Vuex">
    <h3>{{ counter }}</h3>
    <button @click="addOne">Add 2</button>
  </base-container>
</template>

<script>
import BaseContainer from './components/BaseContainer.vue';

export default {
  components: {
    BaseContainer,
  },
  computed: {
    counter() {
      return this.$store.state.counter;
    },
  },
  methods: {
    addOne() {
      this.$store.state.counter++;
    },
  },
};
</script>

this.$store.state를 통해서 state에 접근해서 값을 가져올 수 있습니다.

현재는 간단한 예시를 위해서 state값을 직접 가져오고 직접 변경해보았습니다.

 

Vue Computed 사용 해야 하는 이유

 

이상으로 Vux를 왜 사용하는지, 장점, 설치방법, 사용법 등에 대해서 알아보았습니다.

이외에도 state, getter, mutations, action 등 상태를 관리하는 다양한 방법이 있습니다.

 

다음 포스팅에서 알아보도록 하겠습니다.

감사합니다.