반응형 vue.js3 [Vue.js] 빠르고 간단하게 mixin 적용하기 Intro안녕하세요. 아아덕후입니다. 이 글에서는 Vue.js의 여러 컴포넌트에서 공통으로 사용하는 mixin에 대한 사용법을 정리하기 위해 글을 작성했습니다. 실제 현재 업무에서 여러 화면 및 컴포넌트에 Vuex를 이용해 state로 데이터를 관리하고 있습니다. 각 데이터에 대해서 금액 단위 적용, 날짜 포맷팅 등 수많은 state 데이터에 동일하게 적용되어야 하는 util 함수에 대해 mixin 함수를 사용하여 적용했습니다. Vue의 computed, methods 혹은 Vuex의 mutation, getters를 이용해 data를 변경가능 하지만 화면이 10개, 20개, 100개로 증가하게 되면 같은 코드를 10번, 20번, 100번 사용해야 하니까...! mixin을 이용한 공통 함수로 사용했습니.. 2024. 2. 20. Vuex 모듈 및 사용 방법 정리 Intro현재 Vue.js에서 공식적으로 지원하는 상태관리 라이브러리는 Vuex에서 Pinia로 변경되었지만, 업무에서 Vuex를 사용하고 있어 이를 정리하기 위해 작성한 글입니다. (그래도.. 아직.. Vuex 사용.. 하시는 분들.. 많으시죠..?) 저는 하나의 View 안에 여러 탭 간 이동을 구현해야 하는 업무가 있었습니다. 탭 간(레이아웃 단위 컴포넌트) 이동 시 라우터 이동과 라이프사이클에 따라 초기화되는 vue 인스턴스 data의 문제를 해결하고 각 탭의 상태 관리하기 위해 Vuex를 사용했었습니다. 이를 공유하고 다른 분 들께서도 조금 더 쉽게 Vuex를 적용하시는데 도움을 드리고 싶어 글을 작성했습니다. (Pinia에서는 Vuex에서보다 더 간단한 Composition-API 스타일의 A.. 2024. 2. 12. [Vue.js] 이슈부터 해결하는 Vue 프레임워크 Deep Dive (feat. 공식문서) Vue.js 프레임워크를 이용해 개발하며 마주했던 문제와 해결 방법에 대해서 작성합니다. [Issue1] 상위 컴포넌트의 data의 값이 변경될 때, 하위 컴포넌트에 props로 바인딩 한 값이 변경되지 않는 현상. (업무 예시 : 요금조정 컴포넌트(상위 컴포넌트)에서 axios 통신으로 받아온 데이터(vuex- state)로 DatePicker 컴포넌트(하위 컴포넌트) 날짜 변경(props data)을 해야 하는데 변경되지 않는 이슈 발생) [Solve1] 하위 컴포넌트에 :key ="props value" 를 속성으로 추가하면, 해당 데이터 변경 시 해당 하위 컴포넌트 데이터 변경 감지함. 부모 컴포넌트 입니다. 용돈 주기 ( 해당 예시에서는 :key 없이도 잘 변경이 됩니다..! :key를 어떻게 .. 2023. 3. 28. 이전 1 다음 반응형
