beomy

Vuex에서 단위 테스트를 하고자 하는 주된 부분은 mutation과 action입니다. 1. Mutation Testing mutation은 전달인자에 완전히 의존하는 함수이기 때문에, mutation을 테스트 하는 것은 매우 간단합니다. const state = { ... } // 변이를 이름을 가지는 내보내기를 이용하여 내보냅니다. export const mutations = { ... } export default new Vuex.Store({ state, mutations }) 위의 코드와 같이 mutation과 store를 모두 ES2015의 export를 사용하여 내보내기 하여 테스트 할 때 사용할 수 있습니다. // store.js export const mutations = { incre..

1. Strict Mode strict 모드를 사용하기 위해서는 strict: true를 Vuex의 store를 만들 때 추가만 하면 됩니다. const store = new Vuex.Store({ // ... strict: true }) strict 모드에서는 state가 mutation 핸들러 외부에서 변경 될 때 마다 오류를 발생 시킵니다. 배포시 strict 모드를 꺼야 합니다. strict 모드는 부적절한 state의 변경을 감지하기 위해 state 트리를 관찰하기 때문에, 성능 저하가 발생합니다. 성능 이슈를 해결하기 위해서는 배포 버전에서는 strict 모드를 꺼야 합니다. const store = new Vuex.Store({ // ... strict: process.env.NODE_ENV..

Vuex store는 변이에 대한 훅을 노출하는 plugins 옵션을 제공합니다. 플러그인은 store를 유일한 전달인자로 받는 함수입니다. const myPlugin = store => { // 저장소가 초기화 될 때 불립니다. store.subscribe((mutation, state) => { // 매 변이시마다 불립니다. // 변이는 { type, payload } 포맷으로 제공됩니다. }) } const store = new Vuex.Store({ // ... plugins: [myPlugin] }) 1. 플러그인 내부에서 변이 커밋하기 변이를 커밋한다는 말은 commit 메소드를 사용하여 mutations의 핸들러를 호출한다는 말로 사용할 것입니다. 플러그인은 state를 직접 변경 할 수 없..

하나의 state 트리를 사용하기 때문에 어플리케이션의 모든 state는 하나의 큰 객체 안에 포함됩니다. 프로젝트의 규모가 커질 수록 store의 크기도 커지게 됩니다. Vuex는 이 문제를 해결하기 위해 store를 모듈로 나눌 수 있는 기능을 제공합니다. 각 모듈은 state, mutation, action, getter, 중첩된 모듈을 포함 할 수 있습니다. const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store..

Action은 Mutation과 비슷하지만, 몇가지 차이점이 있습니다. state를 변경하지 않고 Mutation의 핸들러 함수를 호출합니다. 비동기 작업을 수행할 수 있습니다. const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) 위의 코드와 같이 action을 등록 할 수 있습니다. action의 핸들러는 context 객체를 전달인자로 받습니다. context 객체는 store의 메소드와 속성들을 가지고 있는 객체입니다. 그래서 context.com..

Vuex의 store에서 실제로 state를 변경할 수 있는 유일한 방법은 변이(Mutation) 하는 것입니다. Vuex의 Mutation은 이벤트와 유사합니다. 각 Mutation에서는 문자열 타입과 핸들러가 있습니다. 핸들러 함수는 실제 state를 수정하는 곳이고, 첫번째 전달인자로 state를 받습니다. const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 상태 변이 state.count++ } } }) Mutation의 핸들러를 직접 호출 할 수는 없습니다. mutation 옵션은 이벤트 등록과 비슷합니다. 타입이 increment인 Mutation가 발생하면 핸들러를 호출합니다. store..

state를 계산한 값을 사용해야 할 때가 있습니다. computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } todos라는 state에서 done 상태인 리스트를 가져오고 싶을 때 위의 코드와 같이 작성할 수 있습니다. 하지만 여러 컴포넌트에서 이 코드를 사용해야 한다면, 위의 코드를 복사해야 한다는 단점이 있습니다. 동일한 코드를 복사하여 사용하게 된다면 당연히 유지보수는 힘들어지겠죠. 이 단점을 해결하기 하기 위해서 Vuex는 Getter 기능을 제공합니다. store에서 사용하는 컴포넌트의 computed 속성과 비슷하다고 생각하면 이해하기 쉽습니다. computed 속성 처럼..

1. 단일 상태 트리 (Single State Tree) Vuex는 단일 상태 트리(single state tree)를 사용합니다. 즉 이말은, 하나의 객체가 모든 어플리케이션의 state를 포함하고 이 객체가 하나의 원본 소스(single source of truth)입니다. 하나의 어플리케이션은 하나의 store만 가진다는 것을 의미합니다. 단일 상태 트리는 특정 state를 바로 찾을 수 있게 만들고, 현재 앱의 state의 스냅샷을 가져올 수 있어 디버깅을 간편하게 만듭니다. 2. Vuex의 state를 Vue 컴포넌트에 가져오기 Vuex의 store를 Vue 컴포넌트에서 사용할 수 있는 가장 간단한 방법은 computed 속성을 사용하는 것입니다. // Counter 컴포넌트를 만듭니다 cons..

모든 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)입니다. 뷰: 상태의 선언적 매핑입니다. 액..