JavaScript

# 전체내용 둘러보기(Overview) – Link

— H —

Vuex 개요 – https://vuex.vuejs.org/kr/

# Vuex란 무엇인가?(What is Vuex)

뷰 엑스(Vuex)란 간단하게 말하자면 상태 관리 라이브러리를 의미한다. 즉 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있는것이 특징이다. 상태 관리 패턴에서 등장하는 3가지 개념은 상태, 뷰, 액션이다. 그 개념은 아래와 같다.

상태 는 앱을 작동하는 원본 소스
뷰 는 상태의 선언적 매핑
액션 은 뷰 에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법

new Vue({
  // 상태
  data () {
    return {
      count: 0
    }
  },
  // 뷰
  template: `
    <div>{{ count }}</div>
  `,
  // 액션
  methods: {
    increment () {
      this.count++
    }
  }
})

new Vue({

// 상태

data () {

return {

count: 0

}

// 뷰

template: `

<div>{{ count }}</div>

// 액션

methods: {

increment () {

this.count++

}

})

Vuex의 기본구조

# Vuex가 필요한 경우는?

Vue.js 기반의 애플리케이션 규모가 단순하다면 Vuex가 없이도 글로벌 이벤트 버스만 사용하여도 충분할수 있다. 하지만 프로젝트의 규모가 중대형 이상에서 구동되는 SPA(Single Page Application)을 구축하는 경우라면 Vue컴포넌트 외부의 상태를 보다 잘 처리할 수 있는 방법을 생각하게 될 가능성이 있으며 이때 Vuex는 자연스럽게 프로젝트에 도입할수 있는 경우의 수가 될수 있을 것이다. 즉 상태관리는 컴포넌트의 수가 너무 많아 관리가 어려운 복잡한 규모의 애플리케이션에서 필요한 기술이다. Vuex에서 다루는 State, Getters, Mutations, Actions 기능의 사용 방법과 개념은 범위가 넓으므로 학습량이 어느정도 있는 부분이다.

Likes 0