vuex
-
Vue.js - Vuex Actions 및 폴더구조화IT/Vue.js 2020. 7. 30. 13:31
1. Actions 이란? Mutations에는 순차적인 로직들만 선언하고 Actions 에는 비 순차적 또는 비동기 처리 로직들을 선언합니다. 그렇다면 왜 처리 로직의 성격에 따라 Mutations 과 Actions로 나눠 등록해야 할까요? Mutations의 역할 자체가 State 관리에 주안점을 두고 있습니다. 상태관리 자체가 한 데이터에 대해 여러 개의 컴포넌트가 관여하는 것을 효율적으로 관리하기 위함인데 Mutations에 비동기 처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌트에서 변경을 요청했을 때, 그 변경 순서 파악이 어렵기 때문입니다. 이러한 문제를 방지하기 위해 비동기 처리 로직은 Actions에 동기 처리로직은 Mutations에 나눠 구현합니다. 따라서, setTimeou..
-
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({ // ...
-
Vue.js - Vuex 개념 및 statesIT/Vue.js 2020. 7. 27. 09:46
Vuex란? Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있습니다. 정리하자면, - 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 상태 관리(State Management)가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. 예를들면, header, button, list 등의 화면 요소가 각각 컴포넌트로 구성되어 한 화면에서 많은 컴포넌트를 사용합니다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생깁니다. 상태 관리란? 상태..