-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
mutations, commit 형식문의
23.12.13 18:18 작성 조회수 92
1
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이기 때문인가요?
답변을 작성해보세요.
0
0
인프런 AI 인턴
2023.12.15
안녕하세요, 인프런 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을 정의할 때 이러한 형식을 따르도록 설계되어 있으며, 이를 통해 상태 변화를 추적하고 관리하기 쉽게 합니다.
답변 2