Skip to content

Commit e0b3cac

Browse files
Jinjiangfnlctrl
authored andcommitted
[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
1 parent 7d9730e commit e0b3cac

File tree

7 files changed

+119
-28
lines changed

7 files changed

+119
-28
lines changed

docs/zh-cn/SUMMARY.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
- [安装](installation.md)
1010
- [Vuex 是什么?](intro.md)
1111
- [开始](getting-started.md)
12-
- 核心概念
12+
- [核心概念](core-concepts.md)
1313
- [State](state.md)
1414
- [Getters](getters.md)
1515
- [Mutations](mutations.md)

docs/zh-cn/actions.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,13 @@ export default {
106106
// ...
107107
methods: {
108108
...mapActions([
109-
'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
109+
'increment', // 将 this.increment() 映射为 this.$store.dispatch('increment')
110+
111+
// `mapActions` 也支持载荷:
112+
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
110113
]),
111114
...mapActions({
112-
add: 'increment' // 映射 this.add() this.$store.dispatch('increment')
115+
add: 'increment' // this.add() 映射为 this.$store.dispatch('increment')
113116
})
114117
}
115118
}

docs/zh-cn/api.md

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,17 @@ const store = new Vuex.Store({ ...options })
5353
```
5454
state, // 如果在模块中定义则为模块的局部状态
5555
getters, // 等同于 store.getters
56-
rootState // 等同于 store.state
5756
```
57+
58+
当定义在一个模块里时会特别一些
59+
60+
```
61+
state, // 如果在模块中定义则为模块的局部状态
62+
getters, // 等同于 store.getters
63+
rootState // 等同于 store.state
64+
rootGetters // 所有 getters
65+
```
66+
5867
注册的 getter 暴露为 `store.getters`
5968

6069
[详细介绍](getters.md)
@@ -69,6 +78,7 @@ const store = new Vuex.Store({ ...options })
6978
{
7079
key: {
7180
state,
81+
namespaced?,
7282
mutations,
7383
actions?,
7484
getters?,
@@ -115,14 +125,13 @@ const store = new Vuex.Store({ ...options })
115125

116126
### Vuex.Store 实例方法
117127

118-
- **`commit(type: string, payload?: any) | commit(mutation: Object)`**
119-
120-
提交 mutation。 [详细介绍](mutations.md)
128+
- **`commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)`**
121129

122-
- **`dispatch(type: string, payload?: any) | dispatch(action: Object)`**
130+
提交 mutation。`options` 里可以有 `root: true`,它允许在[命名空间模块](modules.md#namespacing)里提交根的 mutation。[详细介绍](mutations.md)
123131

124-
分发 action。返回 action 方法的返回值,如果多个处理函数被触发,那么返回一个 Pormise。 [详细介绍](actions.md)
132+
- **`dispatch(type: string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)`**
125133

134+
分发 action。`options` 里可以有 `root: true`,它允许在[命名空间模块](modules.md#namespacing)里分发根的 action。返回一个解析所有被触发的 action 处理器的 Promise。[详细介绍](actions.md)
126135

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

@@ -145,34 +154,46 @@ const store = new Vuex.Store({ ...options })
145154
})
146155
```
147156

148-
通常用于插件。 [详细介绍](plugins.md)
157+
通常用于插件。[详细介绍](plugins.md)
149158

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

152-
注册一个动态模块。 [详细介绍](modules.md#dynamic-module-registration)
161+
注册一个动态模块。[详细介绍](modules.md#dynamic-module-registration)
153162

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

156-
卸载一个动态模块。 [详细介绍](modules.md#dynamic-module-registration)
165+
卸载一个动态模块。[详细介绍](modules.md#dynamic-module-registration)
157166

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

160-
热替换新的 action 和 mutation。 [详细介绍](hot-reload.md)
169+
热替换新的 action 和 mutation。[详细介绍](hot-reload.md)
161170

162171
### 组件绑定的辅助函数
163172

164-
- **`mapState(map: Array<string> | Object): Object`**
173+
- **`mapState(namespace?: string, map: Array<string> | Object): Object`**
174+
175+
为组件创建计算属性以返回 Vuex store 中的状态。[详细介绍](state.md#the-mapstate-helper)
176+
177+
第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
178+
179+
- **`mapGetters(namespace?: string, map: Array<string> | Object): Object`**
180+
181+
为组件创建计算属性以返回 getter 的返回值。[详细介绍](getters.md#the-mapgetters-helper)
182+
183+
第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
184+
185+
- **`mapActions(namespace?: string, map: Array<string> | Object): Object`**
165186

166-
创建组件的计算属性返回 Vuex store 中的状态。 [详细介绍](state.md#the-mapstate-helper)
187+
创建组件方法分发 action。[详细介绍](actions.md#dispatching-actions-in-components)
167188

168-
- **`mapGetters(map: Array<string> | Object): Object`**
189+
第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
169190

170-
创建组件的计算属性返回 getter 的返回值。 [详细介绍](getters.md#the-mapgetters-helper)
191+
- **`mapMutations(namespace?: string, map: Array<string> | Object): Object`**
171192

172-
- **`mapActions(map: Array<string> | Object): Object`**
193+
创建组件方法提交 mutation。[详细介绍](mutations.md#commiting-mutations-in-components)
173194

174-
创建组件方法分发 action。 [详细介绍](actions.md#dispatching-actions-in-components)
195+
第一个参数是可选的,可以是一个命名空间字符串。[详细介绍](modules.md#binding-helpers-with-namespace)
175196

176-
- **`mapMutations(map: Array<string> | Object): Object`**
197+
- **`createNamespacedHelpers(namespace: string): Object`**
177198

178-
创建组件方法提交 mutation。 [详细介绍](mutations.md#commiting-mutations-in-components)
199+
创建基于命名空间的组件绑定辅助工具。其返回一个包含 `mapState``mapGetters``mapActions``mapMutations` 的对象。它们都已经绑定在了给定的命名空间上。[详细介绍](modules.md#binding-helpers-with-namespace)

docs/zh-cn/core-concepts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# 核心概念
2+
3+
在这一章,我们将会学到 Vue 的这些核心概念。他们是:
4+
- [State](state.md)
5+
- [Getters](getters.md)
6+
- [Mutations](mutations.md)
7+
- [Actions](actions.md)
8+
- [Modules](modules.md)
9+
10+
深入理解所有的概念对于使用 Vuex 来说是必要的。
11+
12+
让我们开始吧。

docs/zh-cn/getters.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,21 @@ computed: {
6464
}
6565
```
6666

67+
你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
68+
69+
```js
70+
getters: {
71+
// ...
72+
getTodoById: (state, getters) => (id) => {
73+
return state.todos.find(todo => todo.id === id)
74+
}
75+
}
76+
```
77+
78+
``` js
79+
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
80+
```
81+
6782
### `mapGetters` 辅助函数
6883

6984
`mapGetters` 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性:

docs/zh-cn/modules.md

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Modules
2+
23
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
34

45
为了解决以上问题,Vuex 允许我们将 store 分割成**模块(module)**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
@@ -80,13 +81,16 @@ const moduleA = {
8081

8182
### 命名空间
8283

83-
默认情况下,模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块更加自包含或提高可重用性,你可以通过添加 `namespaced: true` 的方式使其成为命名空间模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如:
84+
默认情况下,模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
85+
86+
如果希望你的模块具有更高的封装度和复用性,你可以通过添加 `namespaced: true` 的方式使其成为命名空间模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如:
8487

8588
``` js
8689
const store = new Vuex.Store({
8790
modules: {
8891
account: {
8992
namespaced: true,
93+
9094
// 模块内容(module assets)
9195
state: { ... }, // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
9296
getters: {
@@ -98,6 +102,7 @@ const store = new Vuex.Store({
98102
mutations: {
99103
login () { ... } // -> commit('account/login')
100104
},
105+
101106
// 嵌套模块
102107
modules: {
103108
// 继承父模块的命名空间
@@ -107,9 +112,11 @@ const store = new Vuex.Store({
107112
profile () { ... } // -> getters['account/profile']
108113
}
109114
},
115+
110116
// 进一步嵌套命名空间
111117
posts: {
112118
namespaced: true,
119+
113120
state: { ... },
114121
getters: {
115122
popular () { ... } // -> getters['account/posts/popular']
@@ -133,6 +140,7 @@ const store = new Vuex.Store({
133140
modules: {
134141
foo: {
135142
namespaced: true,
143+
136144
getters: {
137145
// 在这个模块的 getter 中,`getters` 被局部化了
138146
// 你可以使用 getter 的第四个参数来调用 `rootGetters`
@@ -142,14 +150,17 @@ modules: {
142150
},
143151
someOtherGetter: state => { ... }
144152
},
153+
145154
actions: {
146155
// 在这个模块中, dispatch 和 commit 也被局部化了
147156
// 他们可以接受 `root` 属性以访问根 dispatch 或 commit
148157
someAction ({ dispatch, commit, getters, rootGetters }) {
149158
getters.someGetter // -> 'foo/someGetter'
150159
rootGetters.someGetter // -> 'someGetter'
160+
151161
dispatch('someOtherAction') // -> 'foo/someOtherAction'
152162
dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
163+
153164
commit('someMutation') // -> 'foo/someMutation'
154165
commit('someMutation', null, { root: true }) // -> 'someMutation'
155166
},
@@ -195,6 +206,31 @@ methods: {
195206
}
196207
```
197208

209+
而且,你可以通过使用 `createNamespacedHelpers` 创建基于某个命名空间辅助工具。它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助工具:
210+
211+
``` js
212+
import { createNamespacedHelpers } from 'vuex'
213+
214+
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
215+
216+
export default {
217+
computed: {
218+
// 在 `some/nested/module` 中查找
219+
...mapState({
220+
a: state => state.a,
221+
b: state => state.b
222+
})
223+
},
224+
methods: {
225+
// 在 `some/nested/module` 中查找
226+
...mapActions([
227+
'foo',
228+
'bar'
229+
])
230+
}
231+
}
232+
```
233+
198234
#### 给插件开发者的注意事项
199235

200236
如果你开发的[插件(Plugin)](plugins.md)提供了模块并允许用户将其添加到 Vuex store,可能需要考虑模块的空间名称问题。对于这种情况,你可以通过插件的参数对象来允许用户指定空间名称:
@@ -236,8 +272,8 @@ store.registerModule(['nested', 'myModule'], {
236272

237273
有时我们可能需要创建一个模块的多个实例,例如:
238274

239-
- 创建多个 store,他们公用同一个模块
240-
- 在一个 store 中多次注册同一个模块
275+
- 创建多个 store,他们公用同一个模块 (例如当 `runInNewContext` 选项是 `false``'once'` 时,为了[在服务端渲染中避免有状态的单例](https://ssr.vuejs.org/en/structure.html#avoid-stateful-singletons))
276+
- 在一个 store 中多次注册同一个模块
241277

242278
如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致状态对象被修改时 store 或模块间数据互相污染的问题。
243279

docs/zh-cn/mutations.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ mutations: {
4848
}
4949
}
5050
```
51+
5152
``` js
5253
store.commit('increment', {
5354
amount: 10
@@ -118,9 +119,9 @@ const store = new Vuex.Store({
118119

119120
用不用常量取决于你 —— 在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。
120121

121-
### mutation 必须是同步函数
122+
### Mutation 必须是同步函数
122123

123-
一条重要的原则就是要记住** mutation 必须是同步函数**。为什么?请参考下面的例子:
124+
一条重要的原则就是要记住 **mutation 必须是同步函数**。为什么?请参考下面的例子:
124125

125126
``` js
126127
mutations: {
@@ -145,10 +146,13 @@ export default {
145146
// ...
146147
methods: {
147148
...mapMutations([
148-
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
149+
'increment', // 将 this.increment() 映射为 this.$store.commit('increment')
150+
151+
// `mapMutations` 也支持载荷:
152+
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
149153
]),
150154
...mapMutations({
151-
add: 'increment' // 映射 this.add() this.$store.commit('increment')
155+
add: 'increment' // this.add() 映射为 this.$store.commit('increment')
152156
})
153157
}
154158
}

0 commit comments

Comments
 (0)