Vuex) state와 mutation의 이해

프론트엔드 백엔드 파트를 나누어 프로젝트를 진행 중,
모든 페이지에서 매번 api통신을 통해 정보를 요청하는 것은 되게 비효율적으로 느껴졌다.
그래서 프론트단에서 Vuex store를 이용해 데이터들을 저장하는 방법에 대해 알아보았다.

이 글은 state와 mutations에 대한 설명만 있습니다

Vuex State란?

• state는 데이터 상태를 관리한다.
• state는 컴포넌트 간에 공유할 data 속성을 의미하며, Component에서의 data 속성과 동일한 역할을 한다.

Vuex state에 접근하려면?

• state에 등록되어 있는 데이터 속성은 템플릿 코드 또는 스크립트 코드에서 $store.state.(속성명) 으로 접근이 가능하다.

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    accessToken: '',
    userId: '',
  },
}

• 위의 코드를 기반으로 현재 state에 저장된 userId 값을 가져오고 싶다면 $store.state.userId 를 통해 접근이 가능하다.

Vuex Mutations란?

• Vuex의 데이터인 state 값을 변경하는 로직을 의미한다.
• 인자를 받아 Vuex에 넘겨줄 수 있고 computed가 아닌 methods에 등록한다.
• 동기적 로직을 정의할 수 있다.
  => Mutations 의 성격상 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수가 있기 때문이다.

store/index.js

// 생략
mutations: {
    setMatchingId(state,userId){
        state.userId = userId
    },
}

• Vuex state에 userId 값을 변경하고 싶다면
  this.store.$commit('setUserId', [변경할 값]) 을 통해 변경할 수 있다.

결론

• 이번 프로젝트에서는 state와 mutations 만으로 해결할 수 있는 문제들이 대부분이었다.
• getters와 actions까지 활용하여 시도해보고 싶었지만
  아직 getters와 actions를 능숙히 다를 수는 없는 상태라 부족한 시간 때문에 적용하지 못했다ㅜ
• Vuex에 대해 조금 더 깊게 공부하고 적용까지 시도해봐야겠다