[Vue] Vuex(중앙제어)

Emit & Props

• 각 컴포넌트는 개별적으로 데이터를 관리해야한다.
• 데이터는 단방향 흐름, 자식간에만 전달이 가능
• 장점: 데이터의 흐름이 직관적임
• 단점: 컴포넌트의 중첩이 많아질 경우 로직이 복잡,불편해짐

 

Vuex

프로젝트 규모가 커질 때 자연스럽게 사용한다.

• 상태관리 패턴 + 라이브러리
• 상태를 전역에서 관리하도록 하는 라이브러리
• 모든 컴포넌트에 대한 중앙 집중식 저장소 역할-> 규모가 큰 프로젝트에(컴포넌트 중첩이 많은) 좋음
• Mutations가 State를 변경 시킨다

Vuex의 구성요소

• State :  데이터의 역할.어플리케이션마다 하나의 저장소를 관리(data),

                State에 접근하는 방삭 : this.$store.state.data_name

• Actions : computed와 같은 역할. State를 기반으로 계산(computed)
• Mutations : State의 상태를 변경하는 유일한 방법(동기적 메소드)

                       직접 호출이 불가능하고 store.commit('정의된 이름')으로 호출

• Getters : 상태를 변이 시키는 대신 액션으로 변이에 대한 커밋 처리(비동기 메소드)

                  컴포넌트가 vuex의 state를 직접 접근하는 코드가 중복된다면 Getters활용

 

명령어

vue add vuex 후에

y(yes)

 

명령어를 치면 index.js에

state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }

이 나온다.(중앙제어)

 

설정

import Vue from 'vue';
import Vuex from 'vuex';

Vue.user(Vuex);