From d078f8087825cbe90347f9e9b05e04df1c0a81b0 Mon Sep 17 00:00:00 2001
From: "Yan.Huang" <ryer.huang@brightcells.com>
Date: Thu, 31 Mar 2016 01:37:01 +0800
Subject: [PATCH] update translation of data-flow.md

---
 docs/zh-cn/data-flow.md | 72 +++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 38 deletions(-)

diff --git a/docs/zh-cn/data-flow.md b/docs/zh-cn/data-flow.md
index dec9ec7b7..7ab72ad6f 100644
--- a/docs/zh-cn/data-flow.md
+++ b/docs/zh-cn/data-flow.md
@@ -2,7 +2,7 @@
 
 为了更好地理解 Vuex app 中的数据流，我们来开发一个简单的计数器 app。注意：这个例子仅仅是为了更好地解释概念，在实际情况中并不需要在这种简单的场合使用 Vuex.
 
-### 引入并加载 Vuex
+### Store
 
 ``` js
 // store.js
@@ -10,19 +10,13 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
-```
-
-### 定义 App State
 
-``` js
+// 应用初始状态
 const state = {
   count: 0
 }
-```
-
-### 定义会被用到的 State Mutations
 
-``` js
+// 定义所需的 mutations
 const mutations = {
   INCREMENT (state) {
     state.count++
@@ -31,30 +25,25 @@ const mutations = {
     state.count--
   }
 }
-```
-
-### 定义可被调用的 Actions
 
-``` js
-const actions = {
-  increment: 'INCREMENT',
-  decrement: 'DECREMENT'
-}
+// 创建 store 实例
+export default new Vuex.Store({
+  state,
+  mutations
+})
 ```
 
-### 创建 Store 实例
+### Actions
 
 ``` js
-export default new Vuex.Store({
-  state,
-  mutations,
-  actions
-})
+// actions.js
+export const increment = ({ dispatch }) => dispatch('INCREMENT')
+export const decrement = ({ dispatch }) => dispatch('DECREMENT')
 ```
 
 ### 在 Vue 组件里使用
 
-**Template**
+**模板**
 
 ``` html
 <div>
@@ -64,29 +53,36 @@ export default new Vuex.Store({
 </div>
 ```
 
-**Script**
+**代码**
 
 ``` js
-import store from './store.js'
-
-export default {
-  computed: {
-    // 在 computed 属性内绑定 state
-    count () {
-      return store.state.count
+// 仅需要在根组件中注入 store 实例一次即可
+import store from './store'
+import { increment, decrement } from './actions'
+
+const app = new Vue({
+  el: '#app',
+  store,
+  vuex: {
+    getters: {
+      count: state => state.count
+    },
+    actions: {
+      increment,
+      decrement
     }
-  },
-  methods: {
-    increment: store.actions.increment,
-    decrement: store.actions.decrement
   }
-}
+})
 ```
 
-你会注意到组件本身非常简单：它所做的仅仅是绑定到 state、然后在用户输入时调用 actions.
+你会注意到组件本身非常简单：它所做的仅仅是绑定到 state、然后在用户输入时调用 actions。
 
 你也会发现整个应用的数据流是单向的，正如 Flux 最初所定义的那样：
 
+1. 用户在组件中的输入操作触发 action 调用；
+2. Actions 通过分发 mutations 来修改 store 实例的状态；
+3. Store 实例的状态变化反过来又通过 getters 被组件获知。
+
 <p align="center">
   <img width="700px" src="vuex.png">
 </p>