HEROPY
Tech
{{ scrollPercentage }}%

Vuex - 1 - 시작하기 / Vuex 설치

js vue vuex

Vuex 란?

VuexVue와 함께 사용하기 위한 ‘상태 관리 패턴’ 라이브러리입니다.
앱의 모든 구성 요소에서 액세스할 수 있는 중앙 집중식 데이터 저장소를 만들 수 있습니다.


Vue.js만 사용할 경우 데이터를 주고 받기 위해서 상위 컴포넌트와 하위 컴포넌트가 지속적으로 propsevent 등을 공유해야 하며, 앱의 규모가 커지며 컴포넌트의 단계가 많아지게 되면 급격하게 관리가 어려워집니다.

Using only Vue.js

아래 그림 처럼 각 컴포넌트가 데이터를 중앙 집중 저장소에서 공유할 수 있게 된다면 컴포넌트의 단계가 많아지더라도 훨씬 쉽고 효율적으로 데이터를 활용할 수 있습니다.

Using Vuex

Vuex 실습 준비

VUE-CLI 프로젝트 설정

우선 vue-cli를 설치하세요.

$ npm install -g vue-cli

빠른 사용을 위한 Webpack + Vue-loader 프로젝트를 생성합니다.

$ vue init webpack-simple vuex-simple-app

의존성 모듈을 설치합니다.

$ npm install

Vuex 설치

npm install --save vuex

약간의 스타일을 추가한 예제를 만들어보려고 합니다.
Vuex에 더욱 집중할 수 있도록 아래의 과정을 생략하고 싶다면 vuex-simple-app-fruits-list을 사용할 수 있습니다.

Component & CSS 구성

과일의 이름과 가격 데이터를 화면에 출력하고자 합니다.
과일 이름의 목록과 가격을 각 컴포넌트로 구성합니다.

components 디렉토리 안에 FruitsList.vueFruitsPrice.vue를 생성하세요..
css 디렉토리 안에 app.css을 생성하세요..
app.css는 reset-css 모듈에 의존성이 있으니 설치합니다.

$ npm install --save-dev reset-css

프로젝트의 src 디렉토리 구조는 다음과 같습니다.

vue-simple-app
  #...
  ├─src
  │  ├─assets
  │  ├─components
  │  │  ├─FruitsList.vue
  │  │  └─FruitsPrice.vue
  │  ├─css
  │  │  └─app.css
  │  ├─App.vue
  │  └─main.js
  #...

App.vue 구성

data 메소드로 데이터를 정의하고 각 컴포넌트를 가져와 fruits속성에 fruits데이터를 바인딩합니다.

<!--App.vue-->
<template>
  <div id="app">
    <h1 id="app-title">Fruits List</h1>
    <div id="fruits-table">
      <fruits-list :fruits="fruits"></fruits-list>
      <fruits-price :fruits="fruits"></fruits-price>
    </div>
  </div>
</template>

<script>
import FruitsList from './components/FruitsList.vue';
import FruitsPrice from './components/FruitsPrice.vue';

export default {
  name: 'app',
  data () {
    return {
      fruits: [
        { name: 'Apple', price: 30 },
        { name: 'Banana', price: 40 },
        { name: 'Mango', price: 50 },
        { name: 'Orange', price: 60 },
        { name: 'Tomato', price: 70 },
        { name: 'Pineapple', price: 80 },
      ]
    }
  },
  components: {
    'fruits-list': FruitsList,
    'fruits-price': FruitsPrice
  }
}
</script>

<style>
  @import url("css/app.css");
</style>

App.vue에서 바인딩한 데이터를 각 컴포넌트의 props로 받아 사용합니다.

FruitsList.vue 구성

<!--FruitsList.vue-->
<template>
  <div id="fruits-list">
    <h1>Fruits Name</h1>
    <ul>
      <li v-for="fruit in fruits">
        {{ fruit.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['fruits']
  }
</script>

<style></style>

FruitsPrice.vue 구성

<!--FruitsPrice.vue-->
<template>
  <div id="fruits-price">
    <h1>Fruits Price</h1>
    <ul>
      <li v-for="fruit in fruits">
        $ {{ fruit.price }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['fruits']
  }
</script>

<style></style>

app.css 구성

약간의 스타일을 추가합니다.

/*app.css*/
@import url("~reset-css/reset.css");
#app-title {
  color: orangered;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  padding: 40px 0 20px 0;
}
#fruits-table {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  text-align: center;
  padding: 0 20px;
}
#fruits-table li {
  padding: 20px;
  border-bottom: 1px dashed grey;
  color: white;
}
#fruits-table li:last-child { border-bottom: none; }
#fruits-table li:hover { background: rgba(255,255,255,.2); }

#fruits-list {
  background: orange;
  flex: 1;
}
#fruits-price {
  background: tomato;
  flex: 1;
}
#fruits-list h1,
#fruits-price h1 {
  font-weight: bold;
  font-size: 20px;
  padding: 20px;
  border-bottom: 1px solid;
}

준비가 끝났으니, 화면에 출력해 보겠습니다.

$ npm run dev

출력

위와 같은 화면이 나온다면 제대로 완성된 상태입니다.

이제 Vuex 를 설치하죠.

$ npm install --save vuex

설치가 되었다면 다음 장에서 Vuex를 사용하여 ‘중앙 집중식 데이터 저장소’를 만들어 봅시다.

공지 이미지
{{ title }}
{{ eventPlace }}
{{ eventDate }}
오늘 하루 그만 보기