<commit_before>---
layout: post
title: "Vuex 개요"
comments: false
description: ""
keywords: ""
---


## Veux 개요

- Vuex 라이브러리 등장 배경
- Vuex 라이브러리의 주요 속성인 state(data), getters(computed), mutations(methods), actions(async methods)
- Vuex를 더 쉽게 사용할 수 있는 Helper
- Vuex로 프로젝트를 구조화 하는 방법 및 모듈 구조화 방법


### 목차
- Vuex 소개
- Flux 패턴 소개
- Vuex 컨셉과 구조
- Vuex 기술 요소 (state, getters, mutations, actions)
- Vuex Helpers
- Vuex 구조화



#### Vuex가 왜 필요할까?
  - 복잡한 애플리케이셩네서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워 진다.
   - Ex. 하위 컴포넌트에서 다른 컴포넌트로 데이터를 전달하려 할때


  - 이벤트 버스로 해결?
    - 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어려움

    ```javascript
    // Login.Vue
    eventBus.$emit('fetch', loginInfo);

    // List.vue
    eventBus.$on('display', data => this.displayOnScreen(data));

    // Chart.vue
    eventBus.$emit('refreshData', ChartData);
    ```
    - 컴포넌트 간 데이터 전달이 명시적이지 않음


#### Vuex로 해결할 수 있는 문제
  - MVC 패턴에서 발생하는 구조적 오류
  - 컴포넌트 간 데이터 전달 명시
  - 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제<commit_msg>vuex 오타 수정<commit_after>---
layout: post
title: "Vuex 개요"
comments: false
description: ""
keywords: ""
---


## Veux 개요

- Vuex 라이브러리 등장 배경
- Vuex 라이브러리의 주요 속성인 state(data), getters(computed), mutations(methods), actions(async methods)
- Vuex를 더 쉽게 사용할 수 있는 Helper
- Vuex로 프로젝트를 구조화 하는 방법 및 모듈 구조화 방법


### 목차
- Vuex 소개
- Flux 패턴 소개
- Vuex 컨셉과 구조
- Vuex 기술 요소 (state, getters, mutations, actions)
- Vuex Helpers
- Vuex 구조화



#### Vuex가 왜 필요할까?
  - 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워 진다.
   - Ex. 하위 컴포넌트에서 다른 컴포넌트로 데이터를 전달하려 할때


  - 이벤트 버스로 해결?
    - 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어려움

    ```javascript
    // Login.Vue
    eventBus.$emit('fetch', loginInfo);

    // List.vue
    eventBus.$on('display', data => this.displayOnScreen(data));

    // Chart.vue
    eventBus.$emit('refreshData', ChartData);
    ```
    - 컴포넌트 간 데이터 전달이 명시적이지 않음


#### Vuex로 해결할 수 있는 문제
  - MVC 패턴에서 발생하는 구조적 오류
  - 컴포넌트 간 데이터 전달 명시
  - 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제
{'fraction_non_alphanumeric': 0.11776753712237584, 'fraction_numerical': 0.0, 'mean_word_length': 2.5591985428051003, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2850917', 'n_tokens_mistral': 1320, 'n_tokens_neox': 1641, 'n_words': 275}