[VUE] VUEX 알아보기

🚀 VUEX란?

• 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
• React의 Flux 패턴에서 기인함
• Vue.js 중고급 개발자로 성장하기 위한 필수 관문

 

🚀 Flux란?

• MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Unidirectional data flow

• action: 화면에서 발생하는 이벤트 또는 사용자의 입력
• dispatcher: 데이터를 변경하는 방법, 메서드
• model: 화면에 표시할 데이터
• view: 사용자에게 비춰지는 화면

 

• 데이터의 흐름이 여러 갈래로 나뉘지 않고 단방향으로만 처리

 

🚀 Vuex가 필요한 이유

복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워짐

 

🚀 Vuex로 해결할 수 있는 문제

1. MVC 패턴에서 발생하는 구조적 오류

2. 컴포넌트 간 데이터 전달 명시

3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

 

🚀 Vuex 컨셉

• State: 컴포넌트 간에 공유하는 데이터 data()
• View: 데이터를 표시하는 화면 template
• Action: 사용자의 입력에 따라 데이터를 변경하는 methods

단방향 데이터 흐름 처리를 단순하게 도식화한 그림

 

 

🚀 Vuex 구조

컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태

 

🚀 Vuex 시작하기

1️⃣ src 폴더 밑에 store 폴더를 만들고 store.js 파일 생성

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({});

 

2️⃣ main.js에 불러오기

import Vue from "vue";
import App from "./App.vue";
import { store } from "./store/store";

new Vue({
  el: "#app",
  store,
  render: (h) => h(App),
});

 

3️⃣  Vuex 기술 요소

• state: 여러 컴포넌트에 공유되는 데이터 data()
• getters: 연산된 state 값에 접근하는 속성 computed()
• mutations: state 값을 변경하는 이벤트 로직, 메서드 methods
• actions: 비동기 처리 로직을 선언하는 메서드 async methods

 

1. state란?

여러 컴포넌트 간에 공유할 데이터 - 상태

// Vue
data : {
  message: 'Hello Vue.js!'
}

// Vuex
state : {
  message: 'Hello Vue.js!'
}

<!-- Vue -->
<p> {{ message }} </p>

<!-- Vuex -->
<p> {{ this.$store.state.message }} </p>

 

 

2. getters란?

• state 값을 접근하는 속성이자 computed()처럼 미리 연산된 값을 접근하는 속성

// store.js

state:{
  num : 10
},
getters: {
  getNumber(state) {
    return state.num;
  },
  doubleNumber(state) {
    return state.num * 2;
  }
}

<p> {{ this.$store.getters.getNumber }} </p>
<p> {{ this.$store.getters.doubleNumber }} </p>