Vuex Central Store

이전 페이지에서 Vuex를 설치했습니다.

Vuex를 이용하여 데이터 저장소(Store)를 만들겠습니다.
src/store라는 디렉토리를 추가하여 store.js를 생성합니다.

vue-simple-app
  #...
  ├─src
  │  ├─assets
  │  ├─components
  │  ├─css
  │  ├─store
  │  │  └─store.js
  #...

이제 App.vue에서 관리하던 fruits 데이터를 store.js에서 옮겨서 관리하겠습니다.
데이터를 가져와서 state(상태) 속성에 추가합니다.

state 속성은 Vue에서의 data 속성과 비슷합니다.

Vue.use 메소드를 사용하여 Vuex 플러그인 사용을 등록합니다.
그리고 Store를 앱에서 사용하기 위해 저장소 정보를 상수 store에 할당한 뒤 export 합니다.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  // 상태
  state: {
    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 }
    ]
  }
});

이렇게 내보낸 정보는 main.js에서 받아 사용합니다.
Store에 작성한 Vue.use(Vuex)에 의해서 Vue에서 store 속성을 사용할 수 있습니다.

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

new Vue({
  store,  // store: store,  // ES6
  el: '#app',
  render: h => h(App)
})

이제 중앙 집중식 저장소를 만들었으니 각 컴포넌트가 실행될 때 props를 사용하지 않아도 됩니다.
아래와 같이 각 컴포넌트에서 props를 제거하고 computed(계산된) 속성을 추가하여 Store에서 데이터를 가져와 바인딩합니다.
저장소에서 State(상태)가 변경되면 computed가 변경되고 결국 DOM 업데이트가 트리거됩니다.

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

<!-- ... -->

<!--FruitsList.vue-->
<!-- ... -->

<script>
  export default {
    // Removed Props
    computed: {
      fruits() {
        return this.$store.state.fruits
      }
    }
  }
</script>

<style></style>

<!--FruitsPrice.vue-->
<!-- ... -->

<script>
  export default {
    // Removed props
    computed: {
      fruits() {
        return this.$store.state.fruits
      }
    }
  }
</script>

<style></style>

정리가 되었다면 잘 나오는지 확인합니다.

$ npm run dev