Vue.js 3.0 전역관리 Vuex 사용하기 (+ vuex-persistedstate)

Vuex

 

Vue Composition API를 사용해서 Vuex로 전역관리 방법에 대해 기록해봅니다. Vuex는 리액트에서는 리덕스와 비슷한 개념이였고 다르다면, 리덕스에서는 하나의 스토어만 가진다는 약속이 있던 반면 Vuex는 여러개의 스토어를 가질 수 있었습니다.

 

Composition API는 리액트와 비슷한 느낌이 있어 Vuex를 사용하는데 큰 어려움은 없었습니다.

 

 

1. Vuex 설치

---

npm install vuex@next --save

 

 

2. store.js 생성

---

import { createStore } from "vuex"
import createPersistedState from "vuex-persistedstate";

 const store = createStore({
    state : {
        count : 0
    },
    mutations: {
        increase(state, value){
            state.count += value;
        },
        decrease(state, value){
            state.count -= value;
        }
    },
})

export default store

 

./src/stroe/store.js 경로에 스토어를 생성해주겠습니다. 간단하게 숫자를 셀 수 있는 count와 값을 넘겨받아 count 증가, 감소 함수를 만들어 줬습니다.

 

 

3. main.js 스토어 추가

---

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

const app = createApp(App);

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

 

 

app에 스토어를 추가해줍니다.

 

 

4. Composition API에서 Store 사용

---

vuex에서 제공하는 useStore로 store객체에 접근해 state와 mutations를 사용합니다.

 

<template>
	<h2 class="subTitle">Vuex - Store</h2>  
    	<p>{{count}}</p>
    	<button class="btn" @click="increase">Plus</button>
    	<button class="btn" @click="decrease">Minus</button>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
    name : 'App',
    setup(){
        const store = useStore();
        const count = computed(()=> store.state.count );
        const increase = () => store.commit('increase', 1);        
        const decrease = () => store.commit('decrease', 1);

        return { count, increase, decrease } 
    },
}
</script>

 

mutations의 경우 store.commit() 매개변수로 mutations에 정의한 함수 이름을 문자열로 전달해줘야 합니다. 리덕스에서dispatch()와 같은 느낌이네요.

 

이제는 setup() 안에서는 useStore 훅을 사용해 어떤 컴포넌트에서든 store에 접근할 수 있습니다. :)

 

 

+) vuex-persistedstate

---

추가로 전역상태 데이터는 단순 데이터 변수이기 때문에 페이지를 새로고침할 경우 초기화된다. 로그인 정보나 오래 가지고 있어야 하는 데이터일 경우 vuex-persistedstate 플러그인을 사용해 브라우저 스토리지에 저장해주면 된다.

 

 

설치

---

npm install --save vuex-persistedstate

 

 

플러그인 추가

---

import { createStore } from "vuex"
import createPersistedState from "vuex-persistedstate";

 const store = createStore({
    state : {
        count : 0
    },
    mutations: {
        increase(state, value){
            state.count += value;
        },
        decrease(state, value){
            state.count -= value;
        }
    },
    plugins : [ createPersistedState({
        paths: ["count"]
    }) ],
})

export default store

 

기존에 생성한 스토어에 plugins를 추가하고 createPersistedState 함수를 사용해서 paths 경로에 배열에 문자열로 저장시킬 state 필드 이름을 넣어주면 끝.