Browse Source

[zh-cn] synced recent update (before #abaa5ae) (#954)

* [zh-cn] synced recent updates from en

* [zh-cn] translated new content which is synced from en

* [zh-cn] typos and small fixes

* [zh-cn] fixed getters -> getter in #954

* [zh-cn] small fixes

* [zh-cn] updated some words in getters.md
勾三股四 7 years ago
parent
commit
e0b3cacc42

+ 1 - 1
docs/zh-cn/SUMMARY.md

@@ -9,7 +9,7 @@
 - [安装](installation.md)
 - [安装](installation.md)
 - [Vuex 是什么?](intro.md)
 - [Vuex 是什么?](intro.md)
 - [开始](getting-started.md)
 - [开始](getting-started.md)
-- 核心概念
+- [核心概念](core-concepts.md)
   - [State](state.md)
   - [State](state.md)
   - [Getters](getters.md)
   - [Getters](getters.md)
   - [Mutations](mutations.md)
   - [Mutations](mutations.md)

+ 5 - 2
docs/zh-cn/actions.md

@@ -106,10 +106,13 @@ export default {
   // ...
   // ...
   methods: {
   methods: {
     ...mapActions([
     ...mapActions([
-      'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
+      'increment', // 将 this.increment() 映射为 this.$store.dispatch('increment')
+
+      // `mapActions` 也支持载荷:
+      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
     ]),
     ]),
     ...mapActions({
     ...mapActions({
-      add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
+      add: 'increment' // 将 this.add() 映射为 this.$store.dispatch('increment')
     })
     })
   }
   }
 }
 }

+ 39 - 18
docs/zh-cn/api.md

@@ -53,8 +53,17 @@ const store = new Vuex.Store({ ...options })
     ```
     ```
     state,     // 如果在模块中定义则为模块的局部状态
     state,     // 如果在模块中定义则为模块的局部状态
     getters,   // 等同于 store.getters
     getters,   // 等同于 store.getters
-    rootState  // 等同于 store.state
     ```
     ```
+
+    当定义在一个模块里时会特别一些
+
+    ```
+    state,       // 如果在模块中定义则为模块的局部状态
+    getters,     // 等同于 store.getters
+    rootState    // 等同于 store.state
+    rootGetters  // 所有 getters
+    ```
+
     注册的 getter 暴露为 `store.getters`。
     注册的 getter 暴露为 `store.getters`。
 
 
     [详细介绍](getters.md)
     [详细介绍](getters.md)
@@ -69,6 +78,7 @@ const store = new Vuex.Store({ ...options })
     {
     {
       key: {
       key: {
         state,
         state,
+        namespaced?,
         mutations,
         mutations,
         actions?,
         actions?,
         getters?,
         getters?,
@@ -115,14 +125,13 @@ const store = new Vuex.Store({ ...options })
 
 
 ### Vuex.Store 实例方法
 ### Vuex.Store 实例方法
 
 
-- **`commit(type: string, payload?: any) | commit(mutation: Object)`**
-
-  提交 mutation。 [详细介绍](mutations.md)
+- **`commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)`**
 
 
-- **`dispatch(type: string, payload?: any) | dispatch(action: Object)`**
+  提交 mutation。`options` 里可以有 `root: true`,它允许在[命名空间模块](modules.md#namespacing)里提交根的 mutation。[详细介绍](mutations.md)
 
 
-  分发 action。返回 action 方法的返回值,如果多个处理函数被触发,那么返回一个 Pormise。 [详细介绍](actions.md)
+- **`dispatch(type: string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)`**
 
 
+  分发 action。`options` 里可以有 `root: true`,它允许在[命名空间模块](modules.md#namespacing)里分发根的 action。返回一个解析所有被触发的 action 处理器的 Promise。[详细介绍](actions.md)
 
 
 - **`replaceState(state: Object)`**
 - **`replaceState(state: Object)`**
 
 
@@ -145,34 +154,46 @@ const store = new Vuex.Store({ ...options })
   })
   })
   ```
   ```
 
 
-  通常用于插件。 [详细介绍](plugins.md)
+  通常用于插件。[详细介绍](plugins.md)
 
 
 - **`registerModule(path: string | Array<string>, module: Module)`**
 - **`registerModule(path: string | Array<string>, module: Module)`**
 
 
-  注册一个动态模块。 [详细介绍](modules.md#dynamic-module-registration)
+  注册一个动态模块。[详细介绍](modules.md#dynamic-module-registration)
 
 
 - **`unregisterModule(path: string | Array<string>)`**
 - **`unregisterModule(path: string | Array<string>)`**
 
 
-  卸载一个动态模块。 [详细介绍](modules.md#dynamic-module-registration)
+  卸载一个动态模块。[详细介绍](modules.md#dynamic-module-registration)
 
 
 - **`hotUpdate(newOptions: Object)`**
 - **`hotUpdate(newOptions: Object)`**
 
 
-  热替换新的 action 和 mutation。 [详细介绍](hot-reload.md)
+  热替换新的 action 和 mutation。[详细介绍](hot-reload.md)
 
 
 ### 组件绑定的辅助函数
 ### 组件绑定的辅助函数
 
 
-- **`mapState(map: Array<string> | Object): Object`**
+- **`mapState(namespace?: string, map: Array<string> | Object): Object`**
+
+  为组件创建计算属性以返回 Vuex store 中的状态。[详细介绍](state.md#the-mapstate-helper)
+
+  第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
+
+- **`mapGetters(namespace?: string, map: Array<string> | Object): Object`**
+
+  为组件创建计算属性以返回 getter 的返回值。[详细介绍](getters.md#the-mapgetters-helper)
+
+  第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
+
+- **`mapActions(namespace?: string, map: Array<string> | Object): Object`**
 
 
-  创建组件的计算属性返回 Vuex store 中的状态。 [详细介绍](state.md#the-mapstate-helper)
+  创建组件方法分发 action。[详细介绍](actions.md#dispatching-actions-in-components)
 
 
-- **`mapGetters(map: Array<string> | Object): Object`**
+  第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
 
 
-  创建组件的计算属性返回 getter 的返回值。 [详细介绍](getters.md#the-mapgetters-helper)
+- **`mapMutations(namespace?: string, map: Array<string> | Object): Object`**
 
 
-- **`mapActions(map: Array<string> | Object): Object`**
+  创建组件方法提交 mutation。[详细介绍](mutations.md#commiting-mutations-in-components)
 
 
-  创建组件方法分发 action。 [详细介绍](actions.md#dispatching-actions-in-components)
+  第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
 
 
-- **`mapMutations(map: Array<string> | Object): Object`**
+- **`createNamespacedHelpers(namespace: string): Object`**
 
 
-  创建组件方法提交 mutation。 [详细介绍](mutations.md#commiting-mutations-in-components)
+  创建基于命名空间的组件绑定辅助工具。其返回一个包含 `mapState`、`mapGetters`、`mapActions` 和 `mapMutations` 的对象。它们都已经绑定在了给定的命名空间上。[详细介绍](modules.md#binding-helpers-with-namespace)

+ 12 - 0
docs/zh-cn/core-concepts.md

@@ -0,0 +1,12 @@
+# 核心概念
+
+在这一章,我们将会学到 Vue 的这些核心概念。他们是:
+  - [State](state.md)
+  - [Getters](getters.md)
+  - [Mutations](mutations.md)
+  - [Actions](actions.md)
+  - [Modules](modules.md)
+
+深入理解所有的概念对于使用 Vuex 来说是必要的。
+
+让我们开始吧。

+ 15 - 0
docs/zh-cn/getters.md

@@ -64,6 +64,21 @@ computed: {
 }
 }
 ```
 ```
 
 
+你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
+
+```js
+getters: {
+  // ...
+  getTodoById: (state, getters) => (id) => {
+    return state.todos.find(todo => todo.id === id)
+  }
+}
+```
+
+``` js
+store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
+```
+
 ### `mapGetters` 辅助函数
 ### `mapGetters` 辅助函数
 
 
 `mapGetters` 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性:
 `mapGetters` 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性:

+ 39 - 3
docs/zh-cn/modules.md

@@ -1,4 +1,5 @@
 # Modules
 # Modules
+
 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
 
 
 为了解决以上问题,Vuex 允许我们将 store 分割成**模块(module)**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
 为了解决以上问题,Vuex 允许我们将 store 分割成**模块(module)**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
@@ -80,13 +81,16 @@ const moduleA = {
 
 
 ### 命名空间
 ### 命名空间
 
 
-默认情况下,模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块更加自包含或提高可重用性,你可以通过添加 `namespaced: true` 的方式使其成为命名空间模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如:
+默认情况下,模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
+
+如果希望你的模块具有更高的封装度和复用性,你可以通过添加 `namespaced: true` 的方式使其成为命名空间模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如:
 
 
 ``` js
 ``` js
 const store = new Vuex.Store({
 const store = new Vuex.Store({
   modules: {
   modules: {
     account: {
     account: {
       namespaced: true,
       namespaced: true,
+
       // 模块内容(module assets)
       // 模块内容(module assets)
       state: { ... }, // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
       state: { ... }, // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
       getters: {
       getters: {
@@ -98,6 +102,7 @@ const store = new Vuex.Store({
       mutations: {
       mutations: {
         login () { ... } // -> commit('account/login')
         login () { ... } // -> commit('account/login')
       },
       },
+
       // 嵌套模块
       // 嵌套模块
       modules: {
       modules: {
         // 继承父模块的命名空间
         // 继承父模块的命名空间
@@ -107,9 +112,11 @@ const store = new Vuex.Store({
             profile () { ... } // -> getters['account/profile']
             profile () { ... } // -> getters['account/profile']
           }
           }
         },
         },
+
         // 进一步嵌套命名空间
         // 进一步嵌套命名空间
         posts: {
         posts: {
           namespaced: true,
           namespaced: true,
+
           state: { ... },
           state: { ... },
           getters: {
           getters: {
             popular () { ... } // -> getters['account/posts/popular']
             popular () { ... } // -> getters['account/posts/popular']
@@ -133,6 +140,7 @@ const store = new Vuex.Store({
 modules: {
 modules: {
   foo: {
   foo: {
     namespaced: true,
     namespaced: true,
+
     getters: {
     getters: {
       // 在这个模块的 getter 中,`getters` 被局部化了
       // 在这个模块的 getter 中,`getters` 被局部化了
       // 你可以使用 getter 的第四个参数来调用 `rootGetters`
       // 你可以使用 getter 的第四个参数来调用 `rootGetters`
@@ -142,14 +150,17 @@ modules: {
       },
       },
       someOtherGetter: state => { ... }
       someOtherGetter: state => { ... }
     },
     },
+
     actions: {
     actions: {
       // 在这个模块中, dispatch 和 commit 也被局部化了
       // 在这个模块中, dispatch 和 commit 也被局部化了
       // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
       // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
       someAction ({ dispatch, commit, getters, rootGetters }) {
       someAction ({ dispatch, commit, getters, rootGetters }) {
         getters.someGetter // -> 'foo/someGetter'
         getters.someGetter // -> 'foo/someGetter'
         rootGetters.someGetter // -> 'someGetter'
         rootGetters.someGetter // -> 'someGetter'
+
         dispatch('someOtherAction') // -> 'foo/someOtherAction'
         dispatch('someOtherAction') // -> 'foo/someOtherAction'
         dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
         dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
+
         commit('someMutation') // -> 'foo/someMutation'
         commit('someMutation') // -> 'foo/someMutation'
         commit('someMutation', null, { root: true }) // -> 'someMutation'
         commit('someMutation', null, { root: true }) // -> 'someMutation'
       },
       },
@@ -195,6 +206,31 @@ methods: {
 }
 }
 ```
 ```
 
 
+而且,你可以通过使用 `createNamespacedHelpers` 创建基于某个命名空间辅助工具。它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助工具:
+
+``` js
+import { createNamespacedHelpers } from 'vuex'
+
+const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
+
+export default {
+  computed: {
+    // 在 `some/nested/module` 中查找
+    ...mapState({
+      a: state => state.a,
+      b: state => state.b
+    })
+  },
+  methods: {
+    // 在 `some/nested/module` 中查找
+    ...mapActions([
+      'foo',
+      'bar'
+    ])
+  }
+}
+```
+
 #### 给插件开发者的注意事项
 #### 给插件开发者的注意事项
 
 
 如果你开发的[插件(Plugin)](plugins.md)提供了模块并允许用户将其添加到 Vuex store,可能需要考虑模块的空间名称问题。对于这种情况,你可以通过插件的参数对象来允许用户指定空间名称:
 如果你开发的[插件(Plugin)](plugins.md)提供了模块并允许用户将其添加到 Vuex store,可能需要考虑模块的空间名称问题。对于这种情况,你可以通过插件的参数对象来允许用户指定空间名称:
@@ -236,8 +272,8 @@ store.registerModule(['nested', 'myModule'], {
 
 
 有时我们可能需要创建一个模块的多个实例,例如:
 有时我们可能需要创建一个模块的多个实例,例如:
 
 
-- 创建多个 store,他们公用同一个模块
-- 在一个 store 中多次注册同一个模块  
+- 创建多个 store,他们公用同一个模块 (例如当 `runInNewContext` 选项是 `false` 或 `'once'` 时,为了[在服务端渲染中避免有状态的单例](https://ssr.vuejs.org/en/structure.html#avoid-stateful-singletons))
+- 在一个 store 中多次注册同一个模块
 
 
 如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致状态对象被修改时 store 或模块间数据互相污染的问题。
 如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致状态对象被修改时 store 或模块间数据互相污染的问题。
 
 

+ 8 - 4
docs/zh-cn/mutations.md

@@ -48,6 +48,7 @@ mutations: {
   }
   }
 }
 }
 ```
 ```
+
 ``` js
 ``` js
 store.commit('increment', {
 store.commit('increment', {
   amount: 10
   amount: 10
@@ -118,9 +119,9 @@ const store = new Vuex.Store({
 
 
 用不用常量取决于你 —— 在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。
 用不用常量取决于你 —— 在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。
 
 
-### mutation 必须是同步函数
+### Mutation 必须是同步函数
 
 
-一条重要的原则就是要记住** mutation 必须是同步函数**。为什么?请参考下面的例子:
+一条重要的原则就是要记住 **mutation 必须是同步函数**。为什么?请参考下面的例子:
 
 
 ``` js
 ``` js
 mutations: {
 mutations: {
@@ -145,10 +146,13 @@ export default {
   // ...
   // ...
   methods: {
   methods: {
     ...mapMutations([
     ...mapMutations([
-      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
+      'increment', // 将 this.increment() 映射为 this.$store.commit('increment')
+
+      // `mapMutations` 也支持载荷:
+      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
     ]),
     ]),
     ...mapMutations({
     ...mapMutations({
-      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
+      add: 'increment' // 将 this.add() 映射为 this.$store.commit('increment')
     })
     })
   }
   }
 }
 }