힘내봐요! Vuex의숲

vue.js 코딩공작소 책을 참고하여 작성한 내용입니다.
첫번째 고비.. Vuex..

Vuex

Vuex는 애플리케이션 상태가 포함된 단일 객체를 사용한다.
모든 데이터가 정확히 한곳에 저장되고, 애플리케이션 다른곳에서 중복되지 않는다.
Vuex를 사용하더라도 Vuex에 모든 상태를 담을 필요는 없다. 특정 상황에서는 각각의 지역상태만 가지는것이 바람직 할 수도 있다.

상태를 업데이트 하기 위해 mutation을 사용한다. (setter라고 생각하면 편하다.) 뮤테이션은 애플리케이션 상태를 업데이트 하는데 사용한다.
#Vuex에서 뮤테이션은 동기적이다# (비동기와 관련된 것을 다룰때는 문제 해결을 도와주는 액션을 사용한다.)
아래 예제는 버튼이 눌릴때만 트리거 되기 때문에 비동기 코드에 대한 것은 신경쓰지 않아도 된다.
`저장소를 업데이트 하고 Vuex에 설정한 뮤테이션에 접근하기 위해 뮤테이션을 직접 호출 할 수는 없다`
따라서 commit이라는 특별한 함수를 사용한다. Vuex의 저장소를 업데이트 하고 변경 사항을 커밋한다.

// 저장소 설정
const store = new Vuex.Store({
  state: {
    msg: 'Hello World',
    count: 0
  },
  mutations: {
    increment(state){
      state.ocunt++
    }
  }
})

new Vue({
  el:'#app',
  data(){
    header: 'Vuex App'
  },
  computed: {
    welcome(){
      return store.state.msg
    }
  },
  counter(){
    retrun store.state.count
  },
  methods: {
    increment(){
      store.commit('increment')    
      //store.mutations.increment()할것 같지만 아니다. commit이라는 메서드를 사용한다.
    }
  }
})

payload를 받아서 state에 전달 할 수도 있다.

//store 객체
mutations: {
  increment(state, payload){
    state.count += payload;
  }
}
methods: {
  increment(){
    store.commit('increment', 10) /뮤테이션에 10을 전달한다..
  }
}

게터와 액션

이전예제에서는 저장소에 직접 접근 했었다.
여러 컴포넌트에서 저장소에 접근해야 한다면 어떻게 해야할까?
환영 메시지를 항상 대문자로 표시하려면 어떻게 해야할까?
게터를 사용하면 모든 컴포넌트가 동일한 방법으로 상태에 접근 할 수 있다.

  //store 객체
  mutations: {
    increment(state, payload){
      state.count += payload;
    }
  },
    getters: {
      msg(state){
        return state.msg.toUpperCase();
      },
      count(state){
        retrun state.count
      }
    }

뮤테이션은 동기적이다. 그런데 비동기 코드를 다룰때는 어떻게 해야할까? 바로 Vuex 액션을 사용해서 해결 할 수 있다.
예를들어 현재 서버에 비동기로 요청을 날려서 응답을 기다리는중이라고 가정하자. 하지만 이전에 사용했었던 뮤테이션은 동기적이므로 사용하기에 적절하지 않다.
액션을 호출할땐 store.dispatch메서드를 사용한다.

//store 객체
actions: {
 increment(context, payload){
  setTimeout(function(){  //서버에 데이터 요청 후 응답이 오기까지 딜레이가 생기는것을 시뮬레이션 하기위해 추가.
   context.commit('increment', payload);
  }, 2000);
 }
}
//Vue.js 인스턴스
methods: {
 increment(){
  store.dispatch('increment', 10); //비동기적으로 접근한다.
 }
}