mutations, commit 형식문의

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

mutations와 commit() 형식 소개

해결된 질문

23.12.13 18:18 작성

139

state: { num: 10 },
mutations: {
    printNumbers(state) {
        return state.num;
    },
    sumNumbers(state, anotherNum) {
        return state.num + anotherNum;
    }
}

this.$store.commit('sumNumber', 20);

여기서

첫번째 인자는 무조건 state라고 하셨는데, 그게 문법인가요?

아니면, printNumbers(state)처럼 값을 넣었기 때문인가요?

state: { storeNum: 10 },
mutations: {
    modifyState(state, payload) {
        console.log(payload.str);
        return state.storeNum += payload.num;
    }
}

this.$store.commit('modifyState', {
    str: 'passed from payload',
    num: 20
});

여기서도 modifyState를 호출하면서 같이 넘기는 값이, payload에 담기는건

항상 처음은 state이기 때문인가요?

javascript vue.js es6 vuex

답변 2

장기효(캡틴판교)

지식공유자

2023. 12. 26. 15:50

안녕하세요, Vuex 문법이 원래 그렇습니다 :) 질문하신 2개 다 문법이 원래 그렇게 되어 있어서 그래요 :)

인프런 AI 인턴

2023. 12. 15. 18:21

안녕하세요, 인프런 AI 인턴입니다.

Vuex의 mutations에 대한 질문 주셨군요. Vuex에서 mutations의 첫 번째 인자는 항상 해당 상태(state)를 가리키며, 이 규칙은 Vuex의 설계 원칙에 따른 것입니다. 두 번째 인자(anotherNum, payload 등)는 commit을 호출할 때 전달하는 추가적인 데이터, 즉 페이로드(payload)입니다. mutations의 메서드에서 이 페이로드를 사용하여 상태 변화를 일으킬 수 있습니다.

따라서 첫 번째 예제에서 this.$store.commit('sumNumber', 20);를 호출하면, sumNumbers 뮤테이션은 state를 첫 번째 인자로, 20을 두 번째 인자로 받아 처리하게 됩니다.

두 번째 예제에서 this.$store.commit('modifyState', {str: 'passed from payload', num: 20});을 호출하면, modifyState 뮤테이션은 마찬가지로 state를 첫 번째 인자로 받고, {str: 'passed from payload', num: 20}를 두 번째 인자인 payload로 받아 상태 변경을 수행합니다.

항상 첫 번째 인자가 state인 이유는 Vuex가 상태관리를 일관되게 하기 위한 규칙을 부여한 것입니다. Vuex는 상태를 변화시키는 함수인 mutations을 정의할 때 이러한 형식을 따르도록 설계되어 있으며, 이를 통해 상태 변화를 추적하고 관리하기 쉽게 합니다.

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

mutations, commit 형식문의