mutations, commit 형식문의

Question

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이기 때문인가요?

캡틴판교 · Answer

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

인프런 AI 인턴 · Answer

안녕하세요, 인프런 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 을 정의할 때 이러한 형식을 따르도록 설계되어 있으며, 이를 통해 상태 변화를 추적하고 관리하기 쉽게 합니다.