[VUE, Softphone] VUE, VUEX 구조 정리

Vuex 구조

• 뷰 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태
  • 시작점은 Vue Components이다.
  • 컴포넌트에서 비동기 로직(Method를 선언해서 API 콜 하는 부분 등)인 Actions를 콜하고,
  • Actions는 비동기 로직만 처리할 뿐 State(Data)를 직접 변경하진 않는다.
  • Actions가 동기 로직인 Mutations를 호출해서 State(Data)를 변경한다.
  • Mutations에서만 State(Data)를 변경할 수 있다.
• 참고자료
  • 자바스크립트 비동기 처리와 콜백 함수
  • 자바스크립트 Promise 쉽게 이해하기

 

 

 

 

/////////////////////////////////////////////////////////////////////////////////////////////////////

// State : 변수들의 집합체

//         - 프로젝트에서 공통으로 사용할 변수를 정의한다.

//         - 각 컴포넌트에서 동일한 값을 사용할 수 있다.

//         - state.변수명

/////////////////////////////////////////////////////////////////////////////////////////////////////

const state = () => ({

 

 

 

/////////////////////////////////////////////////////////////////////////////////////////////////////

// Getters : 해당 함수를 실행 해 들어온 파라미터(변수값)을 다른 특정 데이터로 return 해준다.

//           - getter의 역할을 한다.

//           - getters.함수명()

/////////////////////////////////////////////////////////////////////////////////////////////////////

const getters = {

 

 

/////////////////////////////////////////////////////////////////////////////////////////////////////

// Mutations : 쉽게말하면 Setters 이고, 함수를 실행 해 state{} 안의 변수에 데이터를 저장한다.

//             - state 값을 동기 처리로 변경하는 역할. (Setter 역할)

//             - commit('함수명', '전달인자')

/////////////////////////////////////////////////////////////////////////////////////////////////////

const mutations = {

 

 

/////////////////////////////////////////////////////////////////////////////////////////////////////

// Actions : - Mutations 실행 역활을 하며, 동기 처리를 비동기 처리로 변경하여 결과를 받아 후속 처리.

//           - dispatch('함수명', '전달인자')

/////////////////////////////////////////////////////////////////////////////////////////////////////

const actions = {