vuex + axios 질문 있습니다!

Question

안녕하세요, 강의 다 듣고 혼자서 이것저것 보면서 만들다가 궁금증이 생겨서 문의 드려봅니다.   vuex 에서 helper 기능을 사용 및 axios 통해서 데이터를 받아서 리스트를 뿌려보는 예제를 혼자 만들어 보았는데, 원래 axios 기능을 사용하면 then,catch, 등으로 resp 및 에러체크를 하는데 vuex actions 에서 동작시킬 때 async/await를 사용해서 코드작성할 때 이렇게 작성해도 문제가 없을까요?? mutations : { setUsers(state, data){ state.users.push(data); } }, actions : { async getUsers({commit}){ let resp = ''; try{ resp = await axios.get('https://jsonplaceholder.typicode.com/todos'); for(var i=0; i<resp.data.length; i++){ const data = resp.data[i]; this.state.users.push(data); } }catch(e){ console.log(e); } commit("setUsers", resp.data); } }

캡틴판교 · Answer

안녕하세요 용석님, 네 괜찮을 것 같아요 :)

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 박용석님. vuex에서 axios와 비동기 통신을 사용하면서 async/await를 사용하는 것에 대해 질문해주셨군요. 이에 대해 도움이 될 만한 관련 질문과 답변 링크를 몇 가지 제공해 드리겠습니다. actions / mutations 에 대하여 이 질문에서는 actions와 mutations의 역할과 사용 방식에 대해 설명하고 있습니다. 주로 비동기 처리 로직은 actions에서 수행하고, 상태 변경은 mutations에서 처리하는 것을 권장하는 이유를 다루고 있습니다. 비동기 컴포넌트 체이닝 비슷한 비동기 처리 예제와 관련된 질문으로, 비동기 처리가 올바르게 동작하지 않는 경우에 대하여 다루고 있습니다. 이 답변에서는 비동기 처리를 위해 적절히 에러를 다루는 방법에 대해서도 설명하고 있습니다. 질문해 주신 코드 예제에서 commit 을 사용하는 부분에서 약간의 수정이 필요할 수 있습니다. this.state 대신에 context 객체를 사용하여 접근하는 것이 좋습니다. 또한, state를 직접 수정하는 대신 mutations를 통해 상태를 업데이트하는 것이 Vuex의 권장 방식입니다. 다음은 개선된 예제 코드입니다: mutations: { setUsers(state, data) { state.users = data; // 직접 배열을 설정하는 형태로 수정 } }, actions: { async getUsers({ commit }) { try { const response = await axios.get('https://jsonplaceholder.typicode.com/todos'); commit("setUsers", response.data); } catch (e) { console.log(e); } } } 위 코드에서는 commit 을 사용하여 state를 업데이트하고, response의 데이터를 setUsers mutation을 통해 설정합니다. 이렇게 하면 더 일관되고 명확한 상태 관리가 가능합니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.