[Vue] vuex 상태관리패턴 | vuex 저장소(Store)와 State, Getters, Actions, Mutations | 설치

1. Vuex

- 지난실습과의 Vuex도입으로 인한 차이점

- 상태관리 패턴

2. Vuex 핵심컨셉

- 저장소(Store 개념) State, Getter, Actions, Mutations

3. Vuex 실습

- vuex 설치

1. Vuex

- Vue.js 애플리케이션에 대한 상태관리패턴 + 라이브러리

- 애플리케이션 모든 컴포넌트들의 중앙 저장소 역할 (=데이터 관리를 함)

 

*Vuex 도입 배경

지난 실습!

컴포넌트에서 데이터 누가 관리할까?

나만 쓸거라면 내가 관리. 여러 컴포넌트가 같이 쓴다면 총괄된 부모가 관리한다.

부모의 데이터가 변경되면 가지고 있는 props들은 알아서 바뀜

 

Youtube api 실습 흐름

(1) 자식 컴포넌트(YoutubeSearch)가 클릭하면(Search) 검색하면 $emit로 이벤트 부모에게 보내준다.

(2) 부모는 keyword를 value로 받아다가 axios 이용하여 API서버에 보내고 videos 데이터를 받아온다.

(3) 부모의 데이터 변경되는 순간 props로 동적바인딩으로 SearchResult 자식에 보낸다.

(4) SearchResult가 자기 자식에게 v-for video in videos로 보내서 출력해준다.

 

문제점?

→ 이런 방법은 부모자식단계 복잡해지면 데이터 전달부분 복잡하다.

→  앱이 여러 구성요소로 구성되고 더 커지면 데이터 공유하는 문제가 발생한다!

이제는 부모로부터 데이터를 가져오지 않고
(즉, props로 가져오지않고 == 검색했을 때 emit으로 타고타고 올라가지 않고)
vuex로부터 바로 소통하여 가져온다.

 

 

 

 

https://v3.vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

Vuex에 대한 설명(3버전을 사용한다)

Vuex사용 전(왼) / 후(오)

 

 

 

언제 사용할까?

- 중대형규모의 SPA 구축하는 경우 (단순앱은 간단한 글로벌 이벤트 버스로도 가능)

 

 

상태관리패턴?

단방향 데이터 흐름 : State -> View ->  Actions -> .. State

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

(1) 상태 : 내가 가진 데이터, 앱을 작동하는 원본소스

(2) 뷰 : 상태가 어디에 들어갈지. 선언적 매핑

(3) 액션 : 메소드. 뷰에서 사용자 입력 대해 반응적으로 상태 바꾸는 방법

 

 

 

 

2. Vuex 핵심컨셉 (Mutations의 추가)

- State : 여러 컴포넌트에서 뽑아서 데이터를 관리하는 곳

- Render : State에서 데이터를 가져다가 화면에 뿌려준다

- Vue Components에서 내가 가진 데이터를 부분적으로 변경하려면 Actions를 호출한다.

- Actions에서 Mutations과정을 거쳐서 State를 바꾼다.

 

→ Actions와 Backend API와 통신할 땐 비동기통신(AJAX)하나,

Mutations에는 동기코드를 작성해야한다. (단, 비동기코드를 작성하면 안 되는 건 아님)

 

index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 공통된 데이터가 저장되는 영역
  },
  getters: {
    // state이용하여 값을 새롭게 뿌려주고 싶을 때. computed와 유사 역할
  },
  mutations: {
    // state 변경하는 유일한 방법 / 동기적으로 작성해야만 함
  },
  actions: {
    // mutations를 호출 / back과 비동기 통신 하는 곳 
  },
  modules: {
    // 여러 개의 기능을 쪼개놓았을 때 등록해서 관리
  }
})

 

 

Vuex 저장소(Store) 개념

- 5가지 있으나 modules 제외 4가지 사용

 

① State : 단일상태트리 사용.  data () { return { } } 이 부분을 데이터를 복잡하게 관리하는 게 아닌 이 곳에서 하나의 영역으로 관리

② Getters : Vue Instance의 computed와 같은 역할, State를 보다가 값 변경되면 Getters가 가진 값도 변경됨

③ Mutations : State의 상태를 변경하는 유일한 방법 (methods방식으로 동기코드로 작성)

④ Actions : State를 직접 바꾸는 게 아닌 액션으로 Mutations에 대한 커밋 처리 (비동기 methods이기에 axios 사용)

 

 

*computed 더 알아보기

https://dearbeany.tistory.com/74

[Vue.js] Vue Life Cycle, Vue Instance Option(methods, filter, computed, watch)

 

 

① State

- 접근 방식 : this.$store.state.데이터이름  (this : 현재 쓰고 있는 뷰 인스턴스, state : 객체, 데이터이름 : 속성)

- 모든 상태를 Vuex에서 관리 해야 하는 것은 아님. 즉, 모든 데이터를X

- 모든 컴포넌트의 옵션을 다 빼고 vuex에서 관리한다?

   → No, vuex는 공통으로 많은 곳에서 쓰이는 것, 관계가 심플하지 않은 경우(=먼 친척)만!

 

 

② Getters 

- State를 변경하지 않고 활용하여 계산을 수행 (computed 속성과 유사)

(ex. State에 videos배열을 넣어놨을 때 videos.length를 매번 얻지 않고 Getters에 메소드를 만들어서 length를 얻어옴)

- 실제 계산된 값을 사용하는 것처럼 getters는 저장소의 상태(=State = 데이터)를 기준으로 계산

- computed 속성과 마찬가지로 state 종속성에 따라 캐시되고, 일부 종속성이 변경된 경우에만 다시 재계산

- State를 가지고 값을 새롭게 뿌려줄 순 있으나, getters 자체가 State를 변경하진 않음

 

 

③ Mutations

- Vuex 저장소에서 실제로 State를 변경하는 유일한 방법

- 핸들러 함수는 반드시 동기적이어야 함. (비동기 콜백함수의 실제로 호출 시기를 알 수 있는 방법이 없음. 추적 x. 즉, 어느 시점에서  state가 바뀌는지 알 수가 없다.)

- 첫 번째 인자로는 항상 state 를 받음

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

 

 

④ Actions 

- state를 변이시키는 대신 commit() 메서드를 통해 mutations 호출

- 비동기 작업의 결과를 적용하려고 할 때 사용. (Backend API와 통신 등)

- context 객체 인자를 받음. (store.index.js 파일 내에 있는 모든 요소의 속성 접근 & 메서드 호출 가능) (state를 직접 변경할 수 있지만 하지 말기 : 명확한 역할 분담 (ex. Spring에서 Service와 Dao를 분리하듯)을 하여 올바르게 상태 관리)

 

 

 

 

 

 

3. Vuex  실습

(1) Vuex 설치

vue create vue-vuex-pjt
cd vue-vuex-pjt
vue add vuex

- Vue CLI 방식으로 설치하는데, 라우터와 동일하게  프로젝트를 진행하던 중 추가 하면 App.vue를 덮어쓰므로 백업 후 추가

- vuex 설치 하면 store/index.js (Vuex Core Concepts 가 작성되는 곳)와 main.js 추가됨

 

인스턴스 생성 후 store 옵션을 가진다. 때문에 이후 this.$store 로 접근 가능하다