getters
-
Vue.js - Vuex getters, mutationsIT/Vue.js 2020. 7. 28. 15:20
1. Getter 란? 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할 때 중복된 코드를 반복호출 하게 되는 것입니다. 예를들면 아래와 같은 코드가 있습니다. 여러 컴포넌트에서 같은 로직을 비효율적으로 중복 사용하고 있습니다. 이 때, Vuex의 데이터 (state) 변경을 각 컴포넌트에서 수행하는 것이 아니라, Vuex에서 수행하도록 하고 각 컴포넌트에서 수행 로직을 호출하면, 코드 가독성도 올라가고 성능에서도 이점이 생깁니다. 2. Getters 등록 상위 컴포넌트 : TestVueComponent.vue 하위 컴포넌트 : ChildVuex.vue getters를 Vuex에 추가합니다. export default new Vuex.Store({ // ...