updated the Chinese translation of modules.md (#796)

Author: riophae

docs/zh-cn/modules.md

@@ -1,8 +1,7 @@
 # Modules
+由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
 
-使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。
-
-为了解决以上问题，Vuex 允许我们将 store 分割到**模块（module）**。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割：
+为了解决以上问题，Vuex 允许我们将 store 分割成**模块（module）**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
 
 ``` js
 const moduleA = {
@@ -31,14 +30,14 @@ store.state.b // -> moduleB 的状态
 
 ### 模块的局部状态
 
-对于模块内部的 mutation 和 getter，接收的第一个参数是**模块的局部状态**。
+对于模块内部的 mutation 和 getter，接收的第一个参数是**模块的局部状态对象**。
 
 ``` js
 const moduleA = {
   state: { count: 0 },
   mutations: {
     increment (state) {
-      // state 模块的局部状态
+      // 这里的 `state` 对象是模块的局部状态
       state.count++
     }
   },
@@ -51,7 +50,7 @@ const moduleA = {
 }
 ```
 
-同样，对于模块内部的 action，`context.state` 是局部状态，根节点的状态是 `context.rootState`:
+同样，对于模块内部的 action，局部状态通过 `context.state` 暴露出来， 根节点状态则为 `context.rootState`：
 
 ``` js
 const moduleA = {
@@ -66,7 +65,7 @@ const moduleA = {
 }
 ```
 
-对于模块内部的 getter，根节点状态会作为第三个参数：
+对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：
 
 ``` js
 const moduleA = {
@@ -81,41 +80,133 @@ const moduleA = {
 
 ### 命名空间
 
-模块内部的 action、mutation、和 getter 现在仍然注册在**全局命名空间**——这样保证了多个模块能够响应同一 mutation 或 action。你可以通过添加前缀或后缀的方式隔离各模块，以避免名称冲突。你也可能希望写出一个可复用的模块，其使用环境不可控。例如，我们想创建一个 `todos` 模块：
+默认情况下，模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块更加自包含或提高可重用性，你可以通过添加 `namespaced: true` 的方式使其成为命名空间模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：
 
 ``` js
-// types.js
+const store = new Vuex.Store({
+  modules: {
+    account: {
+      namespaced: true,
+      // 模块内容（module assets）
+      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
+      getters: {
+        isAdmin () { ... } // -> getters['account/isAdmin']
+      },
+      actions: {
+        login () { ... } // -> dispatch('account/login')
+      },
+      mutations: {
+        login () { ... } // -> commit('account/login')
+      },
+      // 嵌套模块
+      modules: {
+        // 继承父模块的命名空间
+        myPage: {
+          state: { ... },
+          getters: {
+            profile () { ... } // -> getters['account/profile']
+          }
+        },
+        // 进一步嵌套命名空间
+        posts: {
+          namespaced: true,
+          state: { ... },
+          getters: {
+            popular () { ... } // -> getters['account/posts/popular']
+          }
+        }
+      }
+    }
+  }
+})
+```
+
+启用了命名空间的 getter 和 action 会收到局部化的 `getter`，`dispatch` 和 `commit`。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 `namespaced` 属性后不需要修改模块内的代码。
+
+#### 在命名空间模块内访问全局内容（Global Assets）
+
+如果你希望使用全局 state 和 getter，`rootState` 和 `rootGetter` 会作为第三和第四参数传入 getter，也会通过 `context` 对象的属性传入 action。
+
+若需要在全局命名空间内分发 action 或提交 mutation，将 `{ root: true }` 作为第三参数传给 `dispatch` 或 `commit` 即可。
 
-// 定义 getter、action、和 mutation 的名称为常量，以模块名 `todos` 为前缀
-export const DONE_COUNT = 'todos/DONE_COUNT'
-export const FETCH_ALL = 'todos/FETCH_ALL'
-export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
+``` js
+modules: {
+  foo: {
+    namespaced: true,
+    getters: {
+      // 在这个模块的 getter 中，`getters` 被局部化了
+      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
+      someGetter (state, getters, rootState, rootGetters) {
+        getters.someOtherGetter // -> 'foo/someOtherGetter'
+        rootGetters.someOtherGetter // -> 'someOtherGetter'
+      },
+      someOtherGetter: state => { ... }
+    },
+    actions: {
+      // 在这个模块中， dispatch 和 commit 也被局部化了
+      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
+      someAction ({ dispatch, commit, getters, rootGetters }) {
+        getters.someGetter // -> 'foo/someGetter'
+        rootGetters.someGetter // -> 'someGetter'
+        dispatch('someOtherAction') // -> 'foo/someOtherAction'
+        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
+        commit('someMutation') // -> 'foo/someMutation'
+        commit('someMutation', null, { root: true }) // -> 'someMutation'
+      },
+      someOtherAction (ctx, payload) { ... }
+    }
+  }
+}
 ```
 
+#### 带命名空间的绑定函数
+
+当使用 `mapState`, `mapGetters`, `mapActions` 和 `mapMutations` 这些函数来绑定命名空间模块时，写起来可能比较繁琐：
+
 ``` js
-// modules/todos.js
-import * as types from '../types'
+computed: {
+  ...mapState({
+    a: state => state.some.nested.module.a,
+    b: state => state.some.nested.module.b
+  })
+},
+methods: {
+  ...mapActions([
+    'some/nested/module/foo',
+    'some/nested/module/bar'
+  ])
+}
+```
 
-// 使用添加了前缀的名称定义 getter、action 和 mutation
-const todosModule = {
-  state: { todos: [] },
+对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：
 
-  getters: {
-    [types.DONE_COUNT] (state) {
-      // ...
-    }
-  },
+``` js
+computed: {
+  ...mapState('some/nested/module', {
+    a: state => state.a,
+    b: state => state.b
+  })
+},
+methods: {
+  ...mapActions('some/nested/module', [
+    'foo',
+    'bar'
+  ])
+}
+```
 
-  actions: {
-    [types.FETCH_ALL] (context, payload) {
-      // ...
-    }
-  },
+#### 给插件开发者的注意事项
 
-  mutations: {
-    [types.TOGGLE_DONE] (state, payload) {
-      // ...
-    }
+如果你开发的[插件（Plugin）](plugins.md)提供了模块并允许用户将其添加到 Vuex store，可能需要考虑模块的空间名称问题。对于这种情况，你可以通过插件的参数对象来允许用户指定空间名称：
+
+``` js
+// 通过插件的参数对象得到空间名称
+// 然后返回 Vuex 插件函数
+export function createPlugin (options = {}) {
+  return function (store) {
+    // 把空间名字添加到插件模块的类型（type）中去
+    const namespace = options.namespace || ''
+    store.dispatch(namespace + 'pluginAction')
   }
 }
 ```
@@ -125,13 +216,40 @@ const todosModule = {
 在 store 创建**之后**，你可以使用 `store.registerModule` 方法注册模块：
 
 ``` js
+// 注册模块 `myModule`
 store.registerModule('myModule', {
   // ...
 })
+// 注册嵌套模块 `nested/myModule`
+store.registerModule(['nested', 'myModule'], {
+  // ...
+})
 ```
 
-模块的状态将是 `store.state.myModule`。
+之后就可以通过 `store.state.myModule` 和 `store.state.nested.myModule` 访问模块的状态。
 
-模块动态注册功能可以让其他 Vue 插件为了应用的 store 附加新模块，以此来分割 Vuex 的状态管理。例如，[`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) 插件可以集成 vue-router 与 vuex，管理动态模块的路由状态。
+模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如，[`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) 插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起，实现应用的路由状态管理。
 
-你也可以使用 `store.unregisterModule(moduleName)` 动态地卸载模块。注意，你不能使用此方法卸载静态模块（在创建 store 时声明的模块）。
+你也可以使用 `store.unregisterModule(moduleName)` 来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。
+
+### 模块重用
+
+有时我们可能需要创建一个模块的多个实例，例如：
+
+- 创建多个 store，他们公用同一个模块
+- 在一个 store 中多次注册同一个模块  
+
+如果我们使用一个纯对象来声明模块的状态，那么这个状态对象会通过引用被共享，导致状态对象被修改时会 store 或模块间数据互相污染的问题。
+
+实际上这和 Vue 组件内的 `data` 是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态（仅 2.3.0+ 支持）：
+
+``` js
+const MyReusableModule = {
+  state () {
+    return {
+      foo: 'bar'
+    }
+  },
+  // mutation, action 和 getter 等等...
+}
+```