vuex + axios 질문 있습니다!

안녕하세요, 강의 다 듣고 혼자서 이것저것 보면서 만들다가 궁금증이 생겨서 문의 드려봅니다.

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);
        }
    }

안녕하세요, 인프런 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을 통해 설정합니다. 이렇게 하면 더 일관되고 명확한 상태 관리가 가능합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변