Vue

[Vue] 12. Vuex

개발자 뭄뭄 2022. 11. 26. 05:09
반응형

1. 상태관리 (State Management)

1. State?

: 현재에 대한 정보 (data)

⇒ Web Application에서는 현재 App 이 가지고 있는 Data로 표현할 수 있다.

2. Management

  • 여러개의 component를 조합해서 하나의 App을 만든다.
  • 각각의 component는 같은 상태(data)를 유지할 필요가 있다 ⇒ 상태 관리(State Management)가 필요하다

3. Pass Props & Emit Event

  • props와 event를 통해서 상태관리를 하면
  • 같은 데이터를 공유하고 있으므로, 각 컴포넌트가 동일한 상태를 유지하고 있다.
  • 그러나!! components의 중첩이 깊어지면 데이터 전달이 쉽지 않다. ⇒ 데이터 전달 구조가 복잡해진다

💡
중앙 저장소 (Centralized Store)를 이용해 보면 어떨까? ⇒ Vuex

4. Centralized Store

  • 중앙 저장소에 데이터를 모아서 상태 관리
  • 규모가 크거나 컴포넌트 중첩이 깊은 프로젝트의 관리가 매우 편리

2. Vuex가 무엇이며, 왜 필요한가?

1. VueX?

  • 상태관리 패턴 + 라이브러리 for vue ⇒ VueX
  • 중앙 저장소를 통해 상태 관리 할 수 있도록 하는 라이브러리
  • 데이터가 예측 가능한 방식으로 변경 될 수 있도록 하는 규칙 설정, Vue의 반응성을 효율적으로 사용하는 상태 관리 기능 제공
  • Vue 의 공식 도구

3. Vuex 기본문법

1. VueX 시작하기

  • vue create vuex-app
  • cd vuex-app
  • vue add vuex
  • src / store가 추가된 것을 알 수 있다.

2. Vue vs VueX

  1. state
    • 중앙에서 관리하는 모든 상태 정보
    • $store.state 로 state 데이터에 접근
  1. mutations
    • 실제로 state를 변경하는 유일한 방법
    • 반드시 동기적인 함수 (handler)가 들어와야 한다.
    • 첫번째 인자로 state를 받으며, component 혹은 actions에서 commit()메서드로 호출된다.
  1. actions
    • mutations와 비슷하지만 비동기 작업을 포함할 수 있다. ⇒ state 직접 변경하는 역할 포기!
    • state를 직접 변경하지 않고, commit() 메서드로 mutations를 호출해서 state 변경
    • context 객체를 인자로 받으며, store.js의 모든 요소가 메서드에 접근할 수 있음. ⇒ state를 직접 변경할 수는 있지만, 하지 않아야 한다.
    • component에서 dispatch() 메서드에 의해 호출된다.
  1. getters
    • vue의 computed에 해당
    • state를 활용하여 계산된 값을 얻고자 할 때 사용
    • getters의 결과는 캐시(cache) 되며, 종속된 값이 변경된 경우에만 재계산 됨
    • getters에서 계산된 값은 state에 영향을 미치지 않음
    • 첫번째 인자로 state, 두번째 인자로 getter를 받음
💡
모든 데이터를 다 state에 넣어야 하는 것은 아님!!! Vuex에도 여전히 pass props & emit event 사용할 수 있다.

3. VueX 실습하기

  1. state 에 접근하기
    1. 바로 접근하기
      <template>
  <div id="app">
    <!-- 잘 권장하지 않는다. -->
    <h1>{{ $store.state.message }}</h1> 
  </div>
</template>
    1. computed 에 정의 후 접근하기
      <template>
  <div id="app">
    <!-- 더 권장하는 방식이다. -->
    <h2>{{ message }}</h2>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
  },
  computed: {
    message(){
      return this.$store.state.message
    }
  }
}
</script>
  1. actions
    1. component에서 dispatch(’action 함수 이름’, 넘겨주는 데이터)
    1. actions에서 함수 정의

      functionName(context, 넘겨받은 데이터) {}

      • context는 store의 모~든 속성을 가지고 있다. 하지만 state 직접조작하는 것을 삼가야 한다!!
  1. mutations
    1. actions에서 commit('mutation이름', 넘겨주는 데이터)형식으로 작성한다
    1. mutations에서 함수 정의

      FUNCTION_NAME(state, 넘겨받은 데이터)

      actions와 구분을 위해서 CAMEL_CASE로 작성한다.

      state.message = newMessage 의 형태로 state의 값을 변경한다.

  1. getters
    1. getters에 함수를 작성한다. functionName(state, getters) {}
    1. getters 출력하기

      computed에 함수를 정의해서 사용한다. (state와 마찬가지로)


Uploaded by N2T

반응형