Skip to content

Commit

Permalink
docs(ja): translate data-flow.md
Browse files Browse the repository at this point in the history
  • Loading branch information
kazupon committed Dec 29, 2015
1 parent 9554039 commit b54feed
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions docs/ja/data-flow.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Data Flow
# データフロー

Let's build a simple counter app with Vuex to get a better understanding of the data flow inside Vuex apps. Note this is a trivial example solely for the purpose of explaining the concepts - in practice you don't need Vuex for such simple tasks.
Vuex アプリケーション内部のデータフローをより理解を得るために、Vuex で単純にカウンタするアプリケーションを構築してみましょう。これは概念を説明する目的のための簡単な例であることに注意してください。実際には、このような単純なタスクのために Vuex は必要ありません。

### Setup
### セットアップ

``` js
// store.js
Expand All @@ -12,15 +12,15 @@ import Vuex from 'vuex'
Vue.use(Vuex)
```

### Define App State
### アプリケーションのステートを定義

``` js
const state = {
count: 0
}
```

### Define Possible State Mutations
### ステート可能なミューテーションを定義

``` js
const mutations = {
Expand All @@ -33,7 +33,7 @@ const mutations = {
}
```

### Define Callable Actions
### 呼び出し可能なアクションを定義

``` js
const actions = {
Expand All @@ -42,7 +42,7 @@ const actions = {
}
```

### Create a Vuex Store
### Vuex Store を作成

``` js
export default new Vuex.Store({
Expand All @@ -52,9 +52,9 @@ export default new Vuex.Store({
})
```

### Use It in a Vue Component
### Vue コンポーネントでの使用

**Template**
**テンプレート**

``` html
<div>
Expand All @@ -64,14 +64,14 @@ export default new Vuex.Store({
</div>
```

**Script**
**スクリプト**

``` js
import store from './store.js'

export default {
computed: {
// bind to state using computed properties
// 算出プロパティ(computed property) を使用してステートにバインド
count () {
return store.state.count
}
Expand All @@ -83,9 +83,9 @@ export default {
}
```

Here you will notice the component itself is extremely simple: it simply displays some state from the Vuex store (not even owning its own data), and calls some store actions on user input events.
ここでは、コンポーネントが非常に単純であることに注意しましょう。それは単に Vuex store からいくつかのステートを表示し(データそれ自身でさえ所有しません)、そしてユーザー入力イベントでいくつかの store のアクションを呼び出します。

You will also notice the data flow is unidirectional, as it should be in Flux:
Flux であるような、データの流れが一方向であることに注意しましょう:

<p align="center">
<img width="700px" src="vuex.png">
Expand Down

0 comments on commit b54feed

Please sign in to comment.