vuex

vuex는 간단하게 설명하면 데이터 저장소 역할의 라이브러리다.

간단하게라고 이야기한 이유는, 

단순히 데이터를 저장하는 역할만 하지 않고 

vuex 저장소의 데이터가 변경되면

vue 컴포넌트가 바로 반영되는 상호작용도 해주기 때문이다. 

아 개념을 설명하기 너무 어렵다 ㅠㅠ

이럴 땐, doc 문서가 최고 

https://vuex.vuejs.org/kr/intro.html

개념은 doc에서 자세히 보는거로 하고..

vuex를 프로젝트에서 사용하기 위해선 다음과 같은 절차가 필요하다. 

step 1.

프로젝트 내부에 vuex 모듈을 설치해야 한다. 

다음의 명령어를 command 에서 실행하여 vuex 모듈을 다운받자.

npm install vuex;

step 2.

vuex를 vue 애플리케이션에 주입시켜야 한다.

보통 Vuex를 Vue 애플리케이션에 주입할 때는 

루트 컴포넌트에서 vue 인스턴스를 생성 시 파라미터로 넣어 주입해준다. 

흠..

말로 하면 어려우니 맨 처음 vue-cli으로 생성된 프로젝트를 기반으로 해서 예제 코드를 생성해보겠다. 

vue-cli로 생성된 프로젝트에서 보면 이전에 정리했듯이, 

main.js 파일 내부에는 루트 vue 인스턴스 생성 코드가 있다. 

관련 참고 : http://iam-song.tistory.com/46

main.js 내부에는 다음과 같이 기본으로 선언되어 있는데,  

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

위의 코드에서 다음과 같이 살짝 수정해보자. 

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './vuex.js' // 1)

Vue.config.productionTip = false

new Vue({

  el: '#app',

  router,

  store, // 2)

  components: { App },

  template: '<App/>'

})

1) 같은 폴더 내부에 vuex 라는 곳에서 vuex store를 import 해왔고, 

2) Vue 인스턴스 생성 시 store를 살포시 넣어주었다. 

여기까지가 루트 인스턴스에서 vuex를 주입하는 코드였고, 

이제 vuex.js 파일을 생성하고 vuex를 만들어보자. 

(아마도 현재 vuex.js 파일을 생성하지 않았을테니 오류가 날 듯.)

위의 코드에서 현재 dir의 vuex.js에서 vuex를 가져오도록 선언해두었으니

동일하게 app.js가 있는 폴더에 vuex.js 파일을 생성한다. 

vuex.js 파일에는 vuex 모듈을 가져오고, vuex의 store 인스턴스를 생성한다. 

vuex.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({ 

state: {

fruits: []

}

})

use 문법은 vue 관련 plugin 들을 사용할 때 

Vue 인스턴스에 주입하기 위한 문법으로 

자세한건 다음 url을 참고.. 

https://kr.vuejs.org/v2/guide/plugins.html

vuex가 제대로 들어가 있나 확인하기 위해 

components/HelloWorld.vue 파일에 store 데이터 로그를 찍어보았다. 

(생략)

mounted() {

console.log(this.$store.state);

}

(생략)

위와 같이 로그가 찍혔다면 성공!

추가로 디버깅 툴에서 확인해보기..

디버깅툴 관련 설명은 http://iam-song.tistory.com/51?category=750830

화면에서 볼 수 있듯이,

디버깅 툴에서 두 번째 탭이 store에 저장된 데이터를 보여주고,

현재 vuex의 state로 fruits array를 선언하여 

화면과 같이 노출되고 있다. 

다음 글에서는 vuex의 내부 요소들에 대해 한번 설명하는거로...