Vue-(10) vuex 설치 및 시작

Vuex 개요

• Vue 상태 관리 라이브러리 (개발 형식에 대한 pattern 제시)

필요성

• 많은 수의 컴포넌트간 공유해야하는 데이터가 있을 경우 사용
• 데이터의 일관성 유지

방식

• 중앙에 데이터 저장소를 두고 애플리케이션 내의 모든 컴포넌트들이 이용
• 컴포넌트들에서 상태 정보를 안전하게 접근할 수 있음 (공유 데이터 안전하게 관리)
• props를 이용한 전달 및 이벤트 호출 불필요

Vuex를 이용한 접근 방법

State(상태=공유데이터)에 데이터를 두고, 데이터를 다루는 메서드 등을 만들어 놓고 각 컴포넌트들이 직접 접근해서 필요한 작업을 수행

<그림> ## Vuex 프로젝트 생성 및 설치 프로젝트 생성 - vue create 프로젝트명 --default - vue create step27vuex --default 해당 project에 library 셋팅 - cd step27vuex - npm install vuex --save **Vuex는 싱글 파일 컴포넌트 체계에서 NPM 방식으로 라이브러리를 설치하는게 좋다.** **npm install vuex --save** **참고로 ES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음** ## Vuex 장점 - 중앙 집중화된 상태 정보 관리 해소 - 상태 정보가 변경되는 상황과 시간을 추적 가능 - 컴포넌트간 상태 정보를 안전하게 활용 및 접근 가능 ## 1. Constant.js 1) 참고 ① db의 설정 정보 분리 db.properties key=value 구조로 구분 일괄적으로 설정 정보를 분리해서 관리 ② 자바 관점 interface는 스펙 제시 가령 Connection 이라는 interface는 썬에서 스펙 제시 db 판매하는 벤더사에서 각 db에 맞게 최적화로 개발해서 driver로 압축해서 jar로 제공 자바 개발자는 단순 호출로 사용하고자 하는 모든 db 접속가능 2) 로직 다수의 컴포넌트들이 어떤 작업을 공유하면서 실행되는지를 파악하기 위해서 함수명을 상수화(스펙 설정) 함수명을 value로 등록 ## 2. myVuexStore.js 1. 로직 - 공유 데이터를 사용 가능하게 하는 js 2. 구성 1. 데이터 - 상태 - 숫자 데이터 & 문자열 데이터 2. 데이터를 가공하는 내용 - 변이 ## 3. Counter.vue - 숫자 데이터 사용하는 컴포넌트들 ## 4. MessageClick.vue & MessageNonClick.vue - 문자 데이터 사용하는 컴포넌트들 ## 5. CLI 기반의 기본적으로 제공하는 핵심 src - 편집 1. main.js 2. App.vue