Vuex
Vuex
Source
Edit
History

폼 핸들링

폼 핸들링

strict 모드로 Vuex를 사용하는 경우 Vuex에 포함된 부분에 v-model을 사용하는 것은 약간 까다로울 수 있습니다.

1
<input v-model="obj.message">

obj가 저장소에서 객체를 반환하는 계산된 속성이라면, 여기에있는 v-model은 사용자가 입력 할 때 obj.message를 직접 변경하려고 합니다. strict 모드에서는 Vuex 변이 처리기 내부에서 변이가 수행되지 않으므로 오류가 발생합니다.

그것을 다루는 “Vuex 방식”은 <input>의 값을 바인딩하고 input 또는 change 이벤트에 대한 액션을 호출하는 것 입니다.

자세히 보기
Vuex
Vuex
Source
Edit
History

Getters

Getters

때로는 저장소 상태를 기반하는 상태를 계산해야 할 수도 있습니다.(예: 아이템 리스트를 필터링하고 계산)

1
2
3
4
5
computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

둘 이상의 컴포넌트가 이를 사용 해야하는 경우 함수를 복제하거나 공유된 헬퍼를 추출하여 여러 위치에서 가져와야합니다. 둘 다 이상적이지 않습니다.

Vuex를 사용하면 저장소에서 “getters”를 정의 할 수 있습니다(저장소의 계산된 속성으로 생각됩니다). Getters는 첫 번째 전달인자로 상태를 받습니다.

자세히 보기
Vuex
Vuex
Source
Edit
History

테스팅

테스팅

Vuex에서 단위 테스트를 하고자 하는 주요 부분은 변이와 액션입니다.

변이 테스팅

변이는 테스트하기 매우 간단합니다. 왜냐하면 변이는 전달인자에 완전히 의존하는 함수이기 때문입니다. 한 가지 트릭은 ES2015 모듈을 사용하고 store.js 파일에 변이를 넣는다면 기본 내보내기와 함께 변이를 명명된 내보내기로 내보낼 수 있다는 것입니다.

1
2
3
4
5
6
7
8
9
const state = { ... }

// 변이를 이름을 가지는 내보내기를 이용하여 내보냅니다.
export const mutations = { ... }

export default new Vuex.Store({
  state,
  mutations
})

Mocha + Chai를 사용하여 변이를 테스팅 하는 예(원하는 프레임워크/assertion 라이브러리를 사용할 수 있습니다.)

자세히 보기
Vuex
Vuex
Source
Edit
History

애플리케이션 구조

애플리케이션 구조

실제로 Vuex는 코드 구조를 제한하지는 않습니다. 이보다 아래에 있는 상위 수준 원칙을 강요합니다.

  1. 애플리케이션 레벨의 상태는 중앙 집중된 저장소 입니다.

  2. 상태를 변경시키는 유일한 방법은 동기 트랜잭션인 변이 를 커밋하는 것입니다.

자세히 보기
Vuex
Vuex
Source
Edit
History

핫 리로딩

핫 리로딩

Vuex는 webpack의 핫 모듈 변경 API를 사용하여 개발 중에 핫 리로드 변이, 모듈, 액션 및 getter를 지원합니다. browserify-hmr 플러그인으로 Browserify에서 사용할 수도 있습니다.

변이와 모듈의 경우, store.hotUpdate() API 메소드를 사용할 필요가 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'

Vue.use(Vuex)

const state = { ... }

const store = new Vuex.Store({
  state,
  mutations,
  modules: {
    a: moduleA
  }
})

if (module.hot) {
  // 액션과 변이를 핫 모듈로 받아 들인다.
  module.hot.accept(['./mutations', './modules/a'], () => {
    // 업데이트 된 모듈은 babel 6 모듈 출력으로 인해
    // .default를 여기에 추가해야합니다.
    const newMutations = require('./mutations').default
    const newModuleA = require('./modules/a').default
    // 새로운 액션과 변이로 바꿉니다.
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        a: newModuleA
      }
    })
  })
}

counter-hot 예제로 핫 리로드를 확인하십시오.

자세히 보기
Vuex
Vuex
Source
Edit
History

Vuex가 무엇인가요?

Vuex가 무엇인가요?

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다.

“상태 관리 패턴”이란 무엇인가요?

간단한 Vue 카운터 앱부터 시작 해보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
  // 상태
  data () {
    return {
      count: 0
    }
  },
  // 뷰
  template: `
    <div>{{ count }}</div>
  `,
  // 액션
  methods: {
    increment () {
      this.count++
    }
  }
})

다음과 같은 기능을 가진 앱입니다.

자세히 보기
Vuex
Vuex
Source
Edit
History

모듈

모듈

단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 하나의 큰 객체 안에 포함됩니다. 그러나 규모가 커짐에 따라 저장소는 매우 비대해질 수 있습니다.

이를 위해 Vuex는 저장소를 모듈 로 나눌 수 있습니다. 각 모듈은 자체 상태, 변이, 액션, 게터 및 심지어 중첩된 모듈을 포함 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA'의 상태
store.state.b // -> moduleB'의 상태

지역 상태 모듈

모듈의 변이와 getter 내부에서 첫 번째 전달인자는 모듈의 지역 상태 가됩니다.

자세히 보기
Vuex
Vuex
Source
Edit
History

변이

변이

Vuex 저장소에서 실제로 상태를 변경하는 유일한 방법은 변이하는 것입니다. Vuex 변이는 이벤트와 매우 유사합니다. 각 변이에는 타입 문자열 핸들러 가 있습니다. 핸들러 함수는 실제 상태 수정을 하는 곳이며, 첫 번째 전달인자로 상태를받습니다.

1
2
3
4
5
6
7
8
9
10
11
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 상태 변이
      state.count++
    }
  }
})

변이 핸들러를 직접 호출 할 수는 없습니다. 이 옵션은 이벤트 등록과 비슷합니다. “타입이 increment인 변이가 발생하면이 핸들러를 호출합니다.” 변이 핸들러를 호출하려면 해당 타입과 함께 store.commit 을 호출해야합니다.

1
store.commit('increment')

자세히 보기