
모든 Vuex 어플리케이션의 중심에는 store가 있습니다. store는 어플리케이션의 상태를 저장하는 컨테이너입니다. Vuex의 store와 전역객체와 두가지 차이점이 있습니다. Vuex store는 반응형입니다. Vuex store가 변경되면 컴포넌트는 변경된 store를 감지하여 화면을 업데이트합니다. store의 state를 직접 변경 할 수 없습니다. store의 상태를 변경할 수 있는 유일한 방법은 commit을 통해 mutations를 이용하는 방법입니다. 이렇게 하면 state 변화를 추척할 수 있고, 디버깅도 용이해 집니다. 1. Vuex 예시 state와 mutations를 사용한 간단한 Vuex 예제입니다. // 모듈 시스템(npm 혹은 yarn)을 사용하는 경우 Vue.use(Vue..

Vuex는 Vue.js 어플리케이션을 위한 상태 관리 패턴 + 라이브러리 입니다. 어플리케이션의 모든 컴포넌트를 위한 중앙 집중식 저장소 역할을 합니다. 상태 변화를 예측하기 쉽도록 도와 줍니다 Vue에서 devtools 확장 프로그램을 지원하여 디버깅이 매우 편합니다. 1. 상태 관리 패턴 Vue.js로 작성한 간단한 카운터 앱을 예제로 이야기 하도록 하겠습니다. new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 상태: 앱을 작동하는 진실의 근원(source of truch)입니다. 뷰: 상태의 선언적 매핑입니다. 액..