본문 바로가기

vue3

[Vue]왜 mutation 에서는 왜 비동기(async wait 문법)를 사용하면 안될까? (수정: 되긴 된다) 이번에 Vue 프로젝트를 진행하면서 mutations의 남용으로 Vuex에 대한 이해를 도왔습니다. 그 부분을 조금 더 자세히 기입합니다. 문제 발생 mutations: { ... async getUserInfos(state, loginId) { const basicUserInfo = await UserInfoApi.getUserInfoById(loginId); state.userinfo.userId = basicUserInfo.data.userId state.userinfo.userLoginId = basicUserInfo.data.userLoginId state.userinfo.userName = basicUserInfo.data.userName state.userinfo.dutyName = basi.. 2020. 12. 26.
[Vue] vue-router에서 Hash Mode Vs History Mode 차이점은 무엇인가? 들어가기 최근 Vue 를 사용하게 되면서 Hash Mode와 History Mode에 대해서 의문점을 가지게 되었습니다. Vue.js에 router 관련된 설정을 추가하면서 다음과 같은 설정에 직면하게 되었습니다. import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { .... } ] }) 여기서 history와 hash를 String으로 작성하여 설정할 수 있습니다 그렇다면 이 둘의 차이점은 무엇일까? 대체 무슨 차이이지? Hash mode Hash mode는 모든 URL을 HASH(.. 2020. 12. 8.
Vuex 의 상태 값의 변화를 감지해서, data 에 반영하는 방법 이번 사내에서 Vue.js 를 활용한 웹 프로젝트를 진행하면서 echart 라이브러리를 통해 깊숙하게 활용하게 되었습니다. 한 페이지에 수십개의 차트 라이브러리가 만들어지고, 이를 사용자에게 보여주는 프로젝트입니다. 여기서 처음 Vue.js와 Vuex를 활용하면서 vuex에 state 값을 어떻게 하면 data에 있는 값에 반영시킬 수 있을까? 라는 고민을 하루 이상했습니다. 이 과정에서 computed 와 watch에 대해서 이해할 수 있는 기회도 얻었고, 동시에 조금 더 보람찬 개발을 할 수 있지 있었습니다. 포스팅의 제목처럼, "Vuex 의 상태 값의 변화를 감지해서, data에 반영하는 방법"이란? computed: { changedParams: function () { const params =.. 2020. 11. 6.