[VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API)

Vuex는 상태(state)를 관리하는 라이브러리이다.

 

Vuex 같은 상태 관리자는 prop Drilling을 방지하거나 그 외 다양한 라이브러리와 연동시켜 사용하기 위해 사용된다.

(*Prop Drilling은 중간 component를 그냥 데이터 전달용으로만 사용하는 이동하는 과정을 일컫는다.)

 

사실 Vuex가 없어도 Provide와 Inject라는 녀석을 사용하면 Prop Drilling 방지는 물론 여러 가지 다른 컴포넌트로 전달이 가능한데, 반응형으로 만들려면 computed를 사용하거나 소스 추적이 어려워지는 현상 때문에 잘 사용하지는 않는다.

 

그러므로 Vuex라는 저장소를 두고 같이 쓰는 값들은 하나의 저장소를 통해 관리하고 저장소를 바라보도록 하는게 취지이다.

추가적으로 vuex-persistedstate 라는 라이브러리와 같이 쓰면 localStroage처럼 새로고침해도 초기화가 안된다고 한다.

---

우선 아래 명령어를 통해 Vuex를 설치해주도록 하자. (현 시점에서는 vuex 4.0.2 버전이 설치되었다.)

npm install vuex --save

 

그리고 나서 store라는 폴더를 만들어주고 우선 storage.js를 만들어주자.

 

▷ 폴더 구조

- store
   └ storage.js
- App.vue
- main.js

 

그리고 storage.js를 통해 저장소를 만들어 줄 것인데, 간단하게 확인차 몇 가지 값을 넣어주고 만들어주도록 하자.

 

▷ storage.js

import { createStore } from "vuex";

// state, getters, mutations, actions, modules
export default createStore({
    state : {
        counter : 2
    },
    getters : {
        getTwoPowerCounter(state){
            return state.counter ** 2;
        }
    },
    mutations : {
        setCounter(state, value){
            state.counter = value;
        }
    },
});

 

▷ main.js

vue router와 마찬가지로 main.js에 등록을 해주어야 사용이 가능하다.

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/router"
import store from "./store/sotrage"

createApp(App)
    .use(store)
    .use(router)
    .mount('#app');

 

그리고 이제 저 위에서 storage.js를 통해 만들어진 저장소에 접근해서 화면에 표출하는 방법에 대해 알아보자.

 

▷ VuexTest.vue

<template>
  <div>
    <h1>Vuex Test with Composition API</h1>
    {{counter}}
    {{ $store.getters.getTwoPowerCounter }}
    <button @click="increase">increase</button>
  </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    const counter = computed(() => store.state.counter);
    const increase = () => store.commit("setCounter", ++counter.value);

    return {counter, increase}
  }
}
</script>

<style>
</style>

 

일단 <template>영역에서 $store.getters.getTwoPowerCounter 라는 함수에 접근해서 표출하도록 하였다.

그리고 하단 <script> 영역에서의 코드는 vue3에서 주로 사용되는 Composition API를 활용해서 코드를 짠 것이다.

(composition api 정리는 나중에...)

 

저런 식으로 이제 접근을 해서 사용할 수 있다.

 

▶ 결과

---

 

다음에는 좀 더 상세한 내용으로 알아보자.

 

참고 : https://vuex.vuejs.org/

What is Vuex? | Vuex