5. Vuex

뷰엑스는 뷰 애플리케이션의 상태 관리 라이브러리이다.
(개인적인 표현으로는 그냥 'Vue 전역변수 라이브러리'...)

주로 다른 컴포넌트와 공유하는 데이터들을 관리할 때 Vuex를 사용한다.

import { mapstate, mapGetters, mapMutations, mapActions } from 'vuex';

• State
  변수 선언 및 초기화를 해주는 영역. 해당 state를 사용하고 싶다면 computed에 할당해주어 사용하면 된다.

• Getters
  Vuex의 computed라고 보면 된다. 여러 vue 파일에서 vuex의 state를 불러와서 같은 연산을 하면 비효율적이다. 이럴 때 Vuex에서 미리 계산해놓고 사용한다.

• Mutations
  메서드를 통해 state의 값들을 변경할 수 있다.
  commit이라는 메서드를 이용하여 뮤테이션의 메서드를 호출할 수 있다.

• Actions
  뮤테이션처럼 메서드를 작성하지만, 비동기 흐름을 처리해야할 때 사용한다.

helper 함수

코드를 좀 더 깔끔하게 관리할 수 있다.

• mapState, mapGetters Vuex의 state, getters를 끌어와서 사용할 수 있다.
  computed에 작성해주어야 하며 k:v 형식으로 가져와도 되고 그냥 변수이름만 딸랑 가져와도 된다.

computed: {
    ...mapState([
        cnt: 'count', ....
    ]),
    ...mapGetters({
        'count',
    })
}

• mapMutations, mapActions methods에 작성해주어야 한다.

methods: {
    ...mapMutations({
        increment: 'increment',
        'decrement',
        // ...
    }),
    ...mapActions({
        randomNumber: 'generateRandomNumber',
        // ...
    })
}