Vue.js - Vuex

Vuex는 뷰의 상태 관리 패턴이자 라이브러리

화면(View) -> 이벤트 발생(Actions) -> 데이터 변경(State)

Vuex 기술 요소

state

: 여러 컴포넌트 간 공유되는 데이터

state 선언

: message라는 state 정의

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  }
})

state 접근

<div>{{ this.$store.state.message }}</div>

getters

: state 값이 변경됐을 때 변화의 차이를 자동으로 반영하여 값 계산,
  computed 속성과 매칭

getters 선언

: state 값인 message의 문자열을 거꾸로 뒤집는 reverseMessage 속성 선언

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  },
  getters: {
    reverseMessage(state) {
      return state.message.split('').reverse().join('');
    }
  }
})

getters 접근

<div>{{ this.$store.getters.reverseMessage }}</div>

mutation

: state 값을 변경하는 유일한 방법, state는 항상 mutation으로 변경,
  methods 속성과 매칭

mutation 선언

: reverseMessage()를 통해 state 값인 message 문자열을 뒤집는다.

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  },
  mutations: {
    reverseMessage(state) {
      state.message = state.message.split('').reverse().join('');
    }
  }
})

mutation 호출

: commit()을 이용해서 mutation 호출

new Vue({
  methods: {
    reverseMsg() {
      this.$store.commit('reverseMessage');
    }
  }
})

여기서 getters와 mutation의 차이는 뭘까??

mutations만 전달인자를 받을 수 있다.
getters는 computed에 등록 했지만 mutations는 methods에 등록한다.

aciton

: mutation 중에서 비동기 처리 로직들을 정의하는 속성

action 선언

: fetchMessage()는 HTTP 통신을 처리하기 때문에 비동기 로직, get으로 받은 response를 commit을 통해 뮤테이션의 인자로 보낸다.

new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    reverseMessage(state, data) {
      state.message = data.split('').reverse().join('');
    }
  },
  actions: {
    fetchMessage(context) {
      axios.get(url).then(function(response) {
        context.commit('reverseMessage', response.message);
      });
    }
  }
})

action 호출

: dispatch()를 이용해 action 호출

new Vue({
  methods: {
    getMessage() {
      this.$store.dispatch('fetchMessage');
    }
  }
})