Vue.js에서 Vuex 설치 및 기본 사용 방법(1)

Vue.js에서 Vuex 설치 및 기본 사용 방법(1)

 

 

지금까지 Props, Slot, Custom Events, Mitt을 이용한 컴포넌트 간 데이터를 주고 받는 예제를 했다. 간단한 프로젝트의 경우에는 위 방법으로도 충분히 가능하지만 컴포넌트 및 데이터가 많은 프로젝트의 경우에는 Vuex를 사용하는 것이 좋다. 하위의 하위의 하위의 컴포넌트에 데이터를 전송하는데 Props만 세번 사용해서 전달하기에는 소스코드의 복잡도만 올라갈 뿐이다. 게다가 어느 컴포넌트에서 그 값을 변경해버렸을 때 어느 컴포넌트에서 이 값을 변경했는지 찾는데에도 많은 시간이 걸릴 것이다. Vuex는 상태(데이터)관리 라이브러리이며 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하고 예측 가능한 방식으로 상태(데이터)를 변경할 수 있다.

 

• 샘플 프로젝트 생성

> vue create vuex-test

 

• Vuex 설치

아래 링크에서 설치 명령어 확인이 가능하다. 아니면 Vue 프로젝트 생성 시 Manually select features선택 후 vuex를 추가할 수 있다.

Installation | Vuex

> npm install vuex@next --save

 

 

• store.js 

src 디렉토리 밑에 store.js 파일을 생성하자. 이 store는 서버와의 통신을 관리해주는 상태관리와 데이터를 가공할 수 있으며 모든 컴포넌트에서 해당 값을 가져와 사용이 가능하다. 

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
        name : 'jiurinie'
    }
  },
})

export default store

 

 

• main.js

위에서 생성한 store.js를 main.js에 등록하자. main.js에 여러 파일을 임포트한 경우에는 해당 구문만 적절히 수정하여 추가한다.

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

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

 

 

• App.vue

store.js에 저장된 name 값을 vue파일의 HTML 구문({{$store.state.xxx}})과 함수(this.$store.state.xxx)에서 출력할 수 있다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h4>HTML에서 출력</h4>
  <h4>안녕 {{$store.state.name}}</h4>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  mounted(){
    alert("함수에서 출력 : " + this.$store.state.name)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

이번 시간에는 간단하게 Vuex를 설치하고 세팅, 선언된 값의 간단한 사용방법에 대해 알아보았다. 다음 시간에는 서버에서 데이터를 가져오는 방법(actions)과 수정 및 가공하는 방법(mutations)에 대해 알아보자.