[Vue.js] Vuex 설치 및 기본 구조

Vuex는 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 라이브러리입니다.

 

Vuex의 구조는 state, getters, mutations, actions로 구분됩니다. 그리고 이것들을 관리하는 것이 바로 store입니다.

 

이제 Vuex의 사용법을 알아보도록 하겠습니다.

 

#1. Vuex 사용법

1) Vuex 설치

: 공식문서에 여러 가지 방법이 있으니 참고하면 좋을듯합니다:)

=> 공식문서 ; https://vuex.vuejs.org/kr/installation.html

설치 | Vuex

 

: 저는 이 중 npm을 사용하여 설치하였습니다!

npm install vuex --save

 

2) store 생성

: store생성을 위하여 store.js 파일을 만들어보겠습니다.

우선 components폴더와 동일 위치에 store폴더를 생성해주고 store폴더 내에 store.js파일을 생성해줍니다.

 

store.js에서 Vuex를 사용하는 기본적인 구조는 아래와 같습니다.

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

Vue.use(Vuex);

export const store = new Vuex.Store({
    state:{

    },
    getters:{

    },
    mutations:{

    },
    actions:{

    }
});

그리고 store를 사용하기 위해서는 import로 가져와줘야 합니다.

저는 main.js에서 App.vue를 관리하고 있기 때문에 main.js에서 store를 import 하여 App.vue의 컴포넌트들에서 사용할 수 있도록 하였습니다.

import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')​

 

이렇게 하면 vuex, store를 사용할 준비가 완료되었습니다.

다음은 vuex 기본 구조들을 사용하는 법에 대해서 정리해보도록 하겠습니다.