Skip to content

Translate vuex in Korean. #517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Dec 11, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/LANGS.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
* [2.0 - Français](fr/)
* [2.0 - Русский](ru/)
* [2.0 - 日本語](ja/)
* [2.0 - 한국어(Korean)](ko/)
* [1.0 Docs](old/)
1 change: 1 addition & 0 deletions docs/ko/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "./SUMMARY.md" %}
22 changes: 22 additions & 0 deletions docs/ko/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Vuex

> 참고: 이 문서는 vuex@2.x 을 기준으로 합니다.

- [1.0 버전 문서를 보려면?](https://github.com/vuejs/vuex/tree/1.0/docs)
- [릴리즈 노트](https://github.com/vuejs/vuex/releases)
- [설치](installation.md)
- [Vuex가 무엇인가요?](intro.md)
- [시작하기](getting-started.md)
- 핵심 컨셉
- [상태](state.md)
- [Getters](getters.md)
- [변이](mutations.md)
- [액션](actions.md)
- [모듈](modules.md)
- [애플리케이션 구조](structure.md)
- [플러그인](plugins.md)
- [Strict 모드](strict.md)
- [폼 핸들링](forms.md)
- [테스팅](testing.md)
- [핫 리로딩](hot-reload.md)
- [API 레퍼런스](api.md)
175 changes: 175 additions & 0 deletions docs/ko/actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
# 액션

액션은 변이와 유사합니다. 몇가지 다른 점은,

- 상태를 변이시키는 대신 액션으로 변이에 대한 커밋을 합니다.
- 작업에는 임의의 비동기 작업이 포함될 수 있습니다.

간단한 액션을 등록합시다.

``` js
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
```

액션 핸들러는 저장소 인스턴스의 같은 메소드들/프로퍼티 세트를 드러내는 컨텍스트 객체를 받습니다. 그래서 `context.commit`을 호출하여 변이를 커밋하거나 `context.state`와 `context.getters`를 통해 상태와 getters에 접근 할 수 있습니다. 나중에 [모듈](modules.md)에서 이 컨텍스트 객체가 저장소 인스턴스 자체가 아닌 이유를 알 수 있습니다.

실제로 (특히 `commit`를 여러 번 호출해야하는 경우)코드를 단순화하기 위해 ES2015 [전달인자 분해](https://github.com/lukehoban/es6features#destructuring)를 사용합니다.

``` js
actions: {
increment ({ commit }) {
commit('increment')
}
}
```

### 디스패치 액션

액션은 `store.dispatch` 메소드로 시작됩니다.

``` js
store.dispatch('increment')
```

처음 볼 때는 이상해 보일 수 있습니다. 카운트를 증가 시키려면 `store.commit('increment')`를 직접 호출하면 어떻습니까? 음, **돌연변이는 동기적** 이어야 한다는 것을 기억하십니까? 액션은 그렇지 않습니다. 액션 내에서 **비동기** 작업을 수행 할 수 있습니다.

``` js
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
```

액션은 동일한 페이로드 타입과 객체 스타일의 디스패치를 지원합니다.

``` js
// 페이로드와 함께 디스패치
store.dispatch('incrementAsync', {
amount: 10
})

// 객체와 함께 디스패치
store.dispatch({
type: 'incrementAsync',
amount: 10
})
```

액션의 좀 더 실용적인 예는 **비동기 API 호출** 과 **여러 개의 변이를 커밋** 하는 장바구니 결제입니다.

``` js
actions: {
checkout ({ commit, state }, products) {
// 장바구니에 현재있는 항목을 저장하십시오.
const savedCartItems = [...state.cart.added]

// 결제 요청을 보낸 후 장바구니를 비웁니다.
commit(types.CHECKOUT_REQUEST)

// 상점 API는 성공 콜백 및 실패 콜백을 받습니다.
shop.buyProducts(
products,
// 요청 성공 핸들러
() => commit(types.CHECKOUT_SUCCESS),
// 요청 실패 핸들러
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
```

비동기 작업의 흐름을 수행하고 커밋하여 작업의 사이드이펙트(상태 변이)을 기록합니다.

### 컴포넌트 내부에서 디스패치 액션 사용하기

`this.$store.dispatch('xxx')`를 사용하여 컴포넌트에서 액션을 디스패치하거나 컴포넌트 메소드를 `store.dispatch` 호출에 매핑하는 `mapActions` 헬퍼를 사용할 수 있습니다 (루트 `store` 주입 필요) :

``` js
import { mapActions } from 'vuex'

export default {
// ...
methods: {
...mapActions([
'increment' // this.increment()을 this.$store.dispatch('increment')에 매핑
]),
...mapActions({
add: 'increment' // this.add()을 this.$store.dispatch('increment')에 매핑
})
}
}
```

### 액션 구성하기

액션은 종종 비동기적 입니다. 그러면 액션이 언제 완료되는지 어떻게 알 수 있습니까? 더 중요한 것은, 복잡한 비동기 흐름을 처리하기 위해 어떻게 여러 작업을 함께 구성 할 수 있습니까?

가장 먼저 알아야 할 점은 `store.dispatch`가 트리거 된 액션 핸들러에 의해 반환된 Promise를 처리 할 수 있으며 Promise를 반환한다는 것입니다.

``` js
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
```

이렇게 할 수 있습니다.

``` js
store.dispatch('actionA').then(() => {
// ...
})
```

그리고 안에 또 다른 액션을 사용할 수 있습니다.

``` js
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
```

마지막으로, JavaScript 기능인 [async/await](https://tc39.github.io/ecmascript-asyncawait/)를 사용하면 다음과 같은 작업을 구성 할 수 있습니다.

``` js
// getData() 및 getOtherData()가 Promise를 반환한다고 가정합니다.
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // actionA가 끝나기를 기다립니다.
commit('gotOtherData', await getOtherData())
}
}
```

> `store.dispatch`가 다른 모듈에서 여러 액션 핸들러를 트리거하는 것이 가능합니다. 이 경우 반환 된 값은 모든 트리거 된 처리기가 완료 되었을 때 처리되는 Promise입니다.
178 changes: 178 additions & 0 deletions docs/ko/api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
# API 레퍼런스

### Vuex.Store

``` js
import Vuex from 'vuex'

const store = new Vuex.Store({ ...options })
```

### Vuex.Store 생성자 옵션

- **state**

- 자료형: `Object`

Vuex 저장소의 루트 상태 객체 입니다.

[상세](state.md)

- **mutations**

- 자료형: `{ [type: string]: Function }`

저장소에 변이를 등록하십시오. 핸들러 함수는 항상 첫 번째 전달인자로 `state`를 받습니다 (모듈에 정의 된 경우 모듈 로컬 상태가됩니다). 두 번째 `payload` 전달인자가 있으면 처리합니다.

[상세](mutations.md)

- **actions**

- 자료형: `{ [type: string]: Function }`

저장소에 액션을 등록하십시오. 핸들러 함수는 다음 속성을 노출하는 `context` 객체를받습니다.

``` js
{
state, // store.state와 같습니다. 또는 모듈에 있는 경우 로컬 상태
rootState, // store.state와 같습니다. 모듈 안에만 존재합니다
commit, // store.commit와 같습니다.
dispatch, // store.dispatch와 같습니다.
getters // store.getters와 같습니다.
}
```

[상세](actions.md)

- **getters**

- 자료형: `{ [key: string]: Function }`

저장소에 getter를 등록하십시오. getter 함수는 다음 전달인자를 받습니다.

```
state, // 모듈에 정의 된 경우 모듈 로컬 상태가됩니다.
getters, // store.getters와 같습니다.
rootState // store.state와 같습니다.
```

등록된 getter는 `store.getters`에 노출됩니다.

[상세](getters.md)

- **modules**

- 자료형: `Object`

저장소에 병합될 하위 모듈을 포함하는 객체 입니다.

``` js
{
key: {
state,
mutations,
actions?,
getters?,
modules?
},
...
}
```

각 모듈은 루트 옵션과 비슷한 `state` 와 `mutations` 를 포함 할 수 있습니다. 모듈의 상태는 모듈의 키를 사용하여 저장소의 루트 상태에 연결됩니다. 모듈의 변이와 getter는 모듈의 로컬 상태를 루트 상태 대신 첫 번째 전달인자로 받으며 모듈 액션의 `context.state`도 로컬 상태를 가리 킵니다.

[상세](modules.md)

- **plugins**

- 자료형: `Array<Function>`

저장소에 적용 할 플러그인 함수의 배열입니다. 플러그인은 저장소를 유일한 전달인자로 받아들이고 아웃바운드 데이터 지속성, 로깅 또는 디버깅을 위한 변이를 감시하거나 (인바운드 데이터 (예: 웹 소켓 또는 관찰 가능 항목)의 디스패치 변이) 감시할 수 있습니다.

[상세](plugins.md)

- **strict**

- 자료형: `Boolean`
- 기본값: `false`

Vuex 저장소를 strict 모드로 변경합니다. strict 모드에서 변이 핸들러 외부의 Vuex 상태에 대한 임의의 변이는 오류를 발생시킵니다.

[상세](strict.md)

### Vuex.Store 인스턴스 속성

- **state**

- 자료형: `Object`

루트 상태. 읽기 전용

- **getters**

- 자료형: `Object`

등록된 getters 입니다. 읽기 전용.

### Vuex.Store 인스턴스 메소드

- **`commit(type: string, payload?: any) | commit(mutation: Object)`**

변이를 커밋합니다. [상세](mutations.md)

- **`dispatch(type: string, payload?: any) | dispatch(action: Object)`**

액션을 디스패치 합니다. 모든 트리거된 액션 핸들러를 처리하는 Promise를 반환합니다. [상세](actions.md)

- **`replaceState(state: Object)`**

저장소의 루트 상태를 바꿉니다. 상태에 대한 상호작용/시점 변경 목적으로 만 사용하십시오.

- **`watch(getter: Function, cb: Function, options?: Object)`**

getter 함수의 반환 값을 반응적으로 지켜보고 값이 변경되면 콜백을 호출합니다. getter는 저장소의 상태를 유일한 인수로받습니다. Vue의 `vm.$watch` 메소드와 같은 옵션을 취하는 옵션 객체를 받아들입니다.

감시를 중단하려면 반환된 핸들 함수를 호출하십시오.

- **`subscribe(handler: Function)`**

저장소 변이를 구독합니다. `handler`는 모든 변이 이후 호출되고 변이 디스크립터와 변이 상태를 전달인자로 받습니다.

``` js
store.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})
```

플러그인에서 가장 일반적으로 사용됩니다. [상세](plugins.md)

- **`registerModule(path: string | Array<string>, module: Module)`**

동적 모듈을 등록합니다. [상세](modules.md#dynamic-module-registration)

- **`unregisterModule(path: string | Array<string>)`**

동적 모듈을 해제 합니다. [상세](modules.md#dynamic-module-registration)

- **`hotUpdate(newOptions: Object)`**

새 액션과 변이를 핫 스왑 합니다. [상세](hot-reload.md)

### 컴포넌트 바인딩 헬퍼

- **`mapState(map: Array<string> | Object): Object`**

Vuex 저장소의 하위 트리를 반환하는 컴포넌트 계산 옵션을 만듭니다. [상세](state.md#the-mapstate-helper)

- **`mapGetters(map: Array<string> | Object): Object`**

getter의 평가된 값을 반환하는 컴포넌트 계산 옵션을 만듭니다. [상세](getters.md#the-mapgetters-helper)

- **`mapActions(map: Array<string> | Object): Object`**

액션을 전달하는 컴포넌트 메소드 옵션을 만듭니다. [상세](actions.md#dispatching-actions-in-components)

- **`mapMutations(map: Array<string> | Object): Object`**

변이를 커밋하는 컴포넌트 메소드 옵션을 만듭니다. [상세](mutations.md#commiting-mutations-in-components)
Loading