【JS/Vue】VueX의 얕은 이해

주의

VueX의 경우 다음 기사를 읽는 것이 가장 좋습니다.
vuex를 아직 이해하지 못한 모든 인류에게 바치는 vuex를 이용한 코드의 도식 - Qiita

ゔ그림X

VueX 구성

Actions

Mutations

State

이하 전체도


Vuex 란 무엇입니까? | Vuex 보다 인용

전체 흐름

상태 확인

action 호출

mutations에 commit

상태 업데이트

this.$store.dispatch('xxx') 로 컴포넌트 내에서 액션을 디스패치할 수 있습니다. 또는 컴포넌트의 메소드를 store.dispatch에 매핑하는 mapActions 도우미를 사용할 수 있습니다 (루트에 store를 주입해야합니다).
액션 | Vuex 보다 인용

store

응용 프로그램의 상태를 유지하는 컨테이너입니다.
store의 상태를 변경할 때는 Mutations에 커밋을 하는 것으로 store를 변경하는 것이 가능합니다.

template에서 $store에 액세스할 수 있습니다.$sotre.state

액션을 부르는 방법

dispatch

this.$store.dispatch('メソッド名')

mapActions

methods: {
  ...mapActions(['login'])
}

action에 정의된 commit

action의 정의를 할 때, 아래와 같이 mutations에 commit를 합니다.
그 때의 commit이 조금 힘들기 어렵습니다.

// 実装
actions: {
  toggleSideMenu ({ commit }) {
    commit('toggleSideMenu')
  }
}

// 本当は
actions: {
  toggleSideMenu (context) {
    context.commit('toggleSideMenu')
  }
}

위에서 설명한 대로 context.commit 를 호출합니다.
자세한 해설은 아래가 알기 쉬웠습니다.
vuex에서 등장하는 분할 할당에 대한 설명 - Qiita
분할 할당 - JavaScript | MDN

Flux

VueX는 Flux를 기반으로합니다.
Flux를 구현한 것이 Redux에서 거기에서 VueX가 태어났습니다.


flux/examples/flux-concepts at master · facebook/flux · GitHub 보다 인용

Flux란 무엇인가 - Qiita

모든 상태를 가져야 하는가?

공식 문서에서도 언급된 대로, 모든 것을 두지 않아도 좋은 것 같습니다.

Vuex를 사용한다는 것은 모든 상태를 Vuex에 넣어야한다는 것은 아닙니다.
상태 | Vuex 보다 인용

참고 기사

Vue와 Vuex 사이의 값을 연결하는 방법 - Qiita
2018년 Vue.js와 Vuex를 사용하고 있는 사람에게 꼭 알고 싶은 개발이나 유지보수 시에 도움이 되는 설계와 Tips와 샘플 코드 - Qiita