Vuex란?

Vuex 소개

• 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 라이브러리
• 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
• React의 Flux 패턴에서 기인함

Flux와 MVC 패턴 소개 및 Flux 등장 배경

Vuex 설치 및 등록

npm install vuex --save

store.js (src/store/store.js)

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

Vue.use(Vuex);

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

main.js

import Vue from 'vue'
import App from './App.vue'
import { store } from './store/store' // store.js import

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

state와 getters 소개

Vuex 기술 요소

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

state란?

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

  // Vue
  data : {
    message : "Hello Vue.js"
  }
  // Vuex
  state : {
    message : "Hello Vue.js!"
  }
  <!-- Vue -->
  <p>{{message}}</p>   
  <!-- Vuex -->
  <p>{{ this.$store.state.message }}</p>

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>

mutations란?

• state값을 변경할 수 있는 유일한 방법이자 메서드
• 뮤테이션은 commit() 으로 동작시킨다.

  // store.js
  state { 
    num : 10
  },
  mutations : {
    printNumbers(state){
        return state.num;
    },
    sumNumbers(state, anotherNum){
        return state.num + anotherNum;
    }
  }
  // App.vue
  this.$store.commit("getNumber");
  this.$store.commit("sumNumbers", 20); // store에 mutation을 동작시키는 명령어(commit)

mutations의 commit() 형식

• state를 변경하기 위해 mutations를 동작시킬 때 인자(payload)를 전달할 수 있음

  // store.js
  state { 
    num : 10
  },
  mutations : {
    modifyState(state, payload){
        console.log(payload.str);
        return state.storeNum += payload.num;
    }
  }
  // App.vue
  this.$store.commit("modifyState", {
    str : "passed from payload",
    num : 20
  });

state는 왜 직접 변경하지 않고 mutations로 변경할까?

• 여러 개의 컴포넌트에서 아래와 같이 state를 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적하기가 어렵다.

  methods : {
    increaseCounter() { this.$store.state.counter++; }
  }

• 특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어렵기 때문

출처 - 인프런 Vue.js 중급 강좌