Vue - Store(Vuex)

참고 :https://simplevue.gitbook.io/intro/16.-vuex

Vuex란

글로벌하게 state를 관리할 수 있도록 도와주는 상태 관리 라이브러리
= 이걸 store라고 명칭한다.

---

Vuex가 필요한 이유

• 형제끼리 state 교환이 불가능하다.
  • 두 컴포넌트를 감싸고 있는 부모 컴포넌트로 state를 올려서 사용한다.

출처 : https://simplevue.gitbook.io/intro/16.-vuex

• props의 깊이가 길어질 경우
  • state를 부모로 올렸더라고 해당 데이터를 원하는 컴포넌트의 깊이가 깊어질수록 props를 내려주는것이 힘들고 복잡해진다.

출처 : https://simplevue.gitbook.io/intro/16.-vuex

• 액션에 따라 동시에 바뀌는 컴포넌트들
  • 버튼이 클릭되었을 때 여러 컴포넌트들에 동시에 영향을 주는 경우가 있다면, vuex를 사용하는 것이 좋다.

출처 : https://simplevue.gitbook.io/intro/16.-vuex

---

Store 기본 양식

export default {
  state: {
    // state에 사용할 모델이나 값을 선언 한다.
    // 직접적으로 호출x
  },
  getters: {
    // getters을 통해 state값을 호출 한다.
    // 직접불러서 선언
  },
  mutations: {
    // mutations는 동기적이어야 함.(비동기 사용 불가)
    // 직접적으로 호출x
  },
  actions: {
    // action은 비동기적 사용이 가능하다. (action에서 mutation을 호출하는 방법을 권장함)
    // 직접불러서 선언
  }
}